[JavaScript知识库]JavaScript---表单验证

目录

一、表单属性

二、 表单验证基础练习 ?

一、表单属性

type、value、checked、selected、disabled

btn.value = "被点击啦";

btn.disabled ?= ?true;//按钮禁用

btn.type ?= ?"text";//改变input框的类型

二、 表单验证基础练习 ?

1、输入内容6-16位?

? ? ? ? 首先判断的事件是表单失去焦点 onblur

? ? ? ? 如果输入正确则提示正确的信息颜色为绿色小图标变化

? ? ? ? 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化

? ? ? ? 因为里面变化样式较多，我们采取className修改样式

   <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
     
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>

效果：

2. 输入内容6-12位

	    <!-- 表单验证 -->
		<input type="text" value="" name="username" id="username"/>
		<div id="usertips" >
			提示：请输入用户名
		</div>

        <script>
        	// 表单验证
			var username =document.getElementById('username');
			var usertips = document.getElementById('usertips');
			//获得鼠标焦点事件
			username.onfocus = function(){
				usertips.innerText='提示：请输入6-12位的字符';
				usertips.className = 'orange';
			}
			
			username.onblur = function(){
				var userDate = this.value;
				
				if(userDate.length>=6&&userDate.length<=12){
					usertips.innerText='用户名合法';
					usertips.className = 'green';
				}else{
					usertips.innerText='用户名不合法';
					usertips.className = 'red';
				}
			}
		</script>

效果：

?