简易版表单验证

最新推荐文章于 2022-12-06 10:30:13 发布

原创最新推荐文章于 2022-12-06 10:30:13 发布 · 322 阅读

CC 4.0 BY-SA版权

本文详细介绍了使用HTML和JavaScript进行表单验证的方法，包括用户名、手机号、验证码和密码的正则表达式验证，以及不同级别的密码强度判断。通过具体代码示例，展示了如何在用户输入信息后即时反馈验证结果。

  <style>
    *{list-style:none;}   
    </style>
</head>
<body>
    <ul>
        <li><span>用户名：</span><input type="text" id="user"/><span></span></li>
        <li><span>手机号码：</span><input type="text" id="tel"/><span></span></li>
        <li><span>验证码：</span><input type="text" id="yz"/><span></span><span></span><li>
        <li><span>密码：</span><input type="text" id="poss"/><span></span></li>
        <li><input type="button" id="btn" value="注册"/></li>
    </ul>
</body>
<script>
    var ouser=document.getElementById("user")
    var otel=document.getElementById("tel")
    var oyz=document.getElementById("yz")
    var oposs=document.getElementById("poss")
    var obtn=document.getElementById("btn")
    var u=t=false;    //if 小括号判断真假       
        ouser.onblur=function(){         //判断用户名，失去焦点验证输入是否正确
                reg=/^[\u2E80-\u9FFF]{2,4}$/   //正则判断用户名
                  if(reg.test(this.value)){   //判断正则
                        this.nextElementSibling.innerHTML="输入正确"  //给后面一个span里面加提示，并判断是否正确 
                        u=true;
                  }else{
                        this.nextElementSibling.innerHTML="输入不正确"
                        u=false
                  }
        }             
        otel.onblur=function(){
            reg=/^[1]\d{10}$/
            if(reg.test(this.value)){
                this.nextElementSibling.innerHTML="手机号格式正确"
                      t=true;
            }else
            this.nextElementSibling.innerHTML="手机号格式不正确"
                      t=false
        }     
        oyz.onclick=function(){      //点击时获取验证码
                var random=Math.round(Math.random()*9999)
                var num=random.toString()
                for(i=0;i<num.length;i++){
                    oyz.nextElementSibling.innerHTML=num;
                }
        }
        oyz.onblur=function(){
            reg=/^\d{4}$/
            if(reg.test(this.value)){
                alert("验证码正确")                 
            }else
            alert("验证码不正确")                  
        }      
        oposs.onblur=function(){   //密码的等级，判断简单 一般  困难   
            numReg=/\d/;            //简单  纯数字
            azReg=/[a-z]/i;         //一般   字母
            tsReg=/^\d[a-z]/i;      //困难    
            var n=a=t=0;            //            
            if(numReg.test(this.value)){
                n=1
            }if(azReg.test(this.value)){
                a=1
            }if(tsReg.test(this.value)){
                t=1;
            }switch(n+a+t){
                case 1:
                this.nextElementSibling.innerHTML="简单"
                break;
                case 2:
                this.nextElementSibling.innerHTML="一般"
                break;
                case 3:
                this.nextElementSibling.innerHTML="困难"
            }
        }      
        obtn.onclick=function(){
            if(u && t){
                    alert("注册成功")
            }else{
                alert("请重新填写")
            }
        }
</script>