简单的注册模块表单验证处理

一个注册框进行表单验证处理

如图

有简单的验证提示功能

具体可以 查看演示

代码思路也比较简单

输入框失去焦点时便检测，并进行处理

表单具有 onsubmit = "return check()"行为，处理验证情况

点击提交表单按钮时，进行最终的验证，达到是否通过表单提交的请求。

先是最基本的html+css部分

 1 <style type="text/css">
 2     body{margin:0;padding: 0;}
 3     .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
 4     .login legend{font-weight: bold;color: green;text-align: center;}
 5     .login label{display:inline-block;width:130px;text-align: right;}
 6     .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
 7     input{height: 20px;width: 170px;}
 8     .borderRed{border: 2px solid red;}
 9     img{display: none;}
10 </style>
11 </head>
12 <body>
13     <div class="login">
14         <form name="form" method="post" action="register.php" onsubmit="return check()">
15             <legend>【Register】</legend>
16             <p><label for="name">UserName: </label>
17             <input type="text" id="name" >
18             <img src="./img/gou.png" width="20px" height="20px"></p>
19             <p><label for="password">Password: </label>
20             <input type="password" id="password" >
21             <img src="./img/gantan.png" width="20px" height="20px"></p>
22             <p><label for="R_password">Password Again: </label>
23             <input type="password" id="R_password" >
24             <img src="./img/gou.png" width="20px" height="20px"></p>
25             <p><label for="email">Email: </label>
26             <input type="text" id="email" >
27             <img src="./img/gou.png" width="20px" height="20px"></p>
28             <p><input type="submit" value="Register" class="btn"></p>
29         </form>
30     </div>

然后是js的class相关处理函数

    function hasClass(obj,cls){    // 判断obj是否有此class
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(obj,cls){  //给 obj添加class
        if(!this.hasClass(obj,cls)){ 
            obj.className += " "+cls;
        }
    }
    function removeClass(obj,cls){  //移除obj对应的class
        if(hasClass(obj,cls)){ 
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg," ");
        }
    }

然后是验证各个输入框的值

 function checkName(name){   //验证name
        if(name != ""){  //不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确
            removeClass(ele.name,"borderRed");  //移除class
            document.images[0].setAttribute("src","./img/gou.png"); //对应图标
            document.images[0].style.display = "inline"; //显示
            return true;
        }else{  //name不符合
            addClass(ele.name,"borderRed"); //添加class
            document.images[0].setAttribute("src","./img/gantan.png"); //对应图标
            document.images[0].style.display = "inline"; //显示
            return false;
        }
    }
    function checkPassw(passw1,passw2){  //验证密码
        if(passw1 == "" || passw2 == "" || passw1 !== passw2){  //两次密码输入不为空且不等  不符合
            addClass(ele.password,"borderRed");
            addClass(ele.R_password,"borderRed");
            document.images[1].setAttribute("src","./img/gantan.png");
            document.images[1].style.display = "inline";
            document.images[2].setAttribute("src","./img/gantan.png");
            document.images[2].style.display = "inline";
            return false;
        }else{    //密码输入正确
            removeClass(ele.password,"borderRed");
            removeClass(ele.R_password,"borderRed");
            document.images[1].setAttribute("src","./img/gou.png");
            document.images[1].style.display = "inline";
            document.images[2].setAttribute("src","./img/gou.png");
            document.images[2].style.display = "inline";
            return true;
        }
    }
    function checkEmail(email){   //验证邮箱
        var pattern =  /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;  
        if(!pattern.test(email)){  //email格式不正确
            addClass(ele.email,"borderRed");
            document.images[3].setAttribute("src","./img/gantan.png");
            document.images[3].style.display = "inline";
            ele.email.select();
            return false;
        }else{  //格式正确
            removeClass(ele.email,"borderRed");
            document.images[3].setAttribute("src","./img/gou.png");
            document.images[3].style.display = "inline";
            return true;
        }
    }

然后为各个输入框添加监听事件：

    var ele = {  //存放各个input字段obj
            name: document.getElementById("name"),
            password: document.getElementById("password"),
            R_password: document.getElementById("R_password"),
            email: document.getElementById("email")
        };
        ele.name.onblur = function(){  //name失去焦点则检测
            checkName(ele.name.value);
        }
        ele.password.onblur = function(){ //password失去焦点则检测
            checkPassw(ele.password.value,ele.R_password.value);
        }
        ele.R_password.onblur = function(){ //R_password失去焦点则检测
            checkPassw(ele.password.value,ele.R_password.value);
        }
        ele.email.onblur = function(){ //email失去焦点则检测
            checkEmail(ele.email.value);
        }

最后就是点击提交注册时调用的check()函数了

function check(){   //表单提交则验证开始
        var ok = false;
        var nameOk = false;
        var emailOk = false;
        var passwOk = false;
        
        if(checkName(ele.name.value)){ nameOk = true; }   //验证name
        if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //验证password
        if(checkEmail(ele.email.value)){ emailOk = true; }   //验证email

        if(nameOk && passwOk && emailOk){ 
            alert("Tip: Register Success ..");   //注册成功
            //return true; 
        }
        return false;   //有误，注册失败
    }

完整代码：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta charset="utf-8">
  5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 <title>Register</title>
  7 <meta name="description" content="">
  8 <meta name="keywords" content="">
  9 <link href="" rel="stylesheet">
 10 <style type="text/css">
 11     body{margin:0;padding: 0;}
 12     .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
 13     .login legend{font-weight: bold;color: green;text-align: center;}
 14     .login label{display:inline-block;width:130px;text-align: right;}
 15     .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
 16     input{height: 20px;width: 170px;}
 17     .borderRed{border: 2px solid red;}
 18     img{display: none;}
 19 </style>
 20 </head>
 21 <body>
 22     <div class="login">
 23         <form name="form" method="post" action="register.php" onsubmit="return check()">
 24             <legend>【Register】</legend>
 25             <p><label for="name">UserName: </label>
 26             <input type="text" id="name" >
 27             <img src="./img/gou.png" width="20px" height="20px"></p>
 28             <p><label for="password">Password: </label>
 29             <input type="password" id="password" >
 30             <img src="./img/gantan.png" width="20px" height="20px"></p>
 31             <p><label for="R_password">Password Again: </label>
 32             <input type="password" id="R_password" >
 33             <img src="./img/gou.png" width="20px" height="20px"></p>
 34             <p><label for="email">Email: </label>
 35             <input type="text" id="email" >
 36             <img src="./img/gou.png" width="20px" height="20px"></p>
 37             <p><input type="submit" value="Register" class="btn"></p>
 38         </form>
 39     </div>
 40     <script type="text/javascript">
 41     function hasClass(obj,cls){    // 判断obj是否有此class
 42         return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
 43     }
 44     function addClass(obj,cls){  //给 obj添加class
 45         if(!this.hasClass(obj,cls)){ 
 46             obj.className += " "+cls;
 47         }
 48     }
 49     function removeClass(obj,cls){  //移除obj对应的class
 50         if(hasClass(obj,cls)){ 
 51             var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
 52             obj.className = obj.className.replace(reg," ");
 53         }
 54     }
 55 
 56 
 57     function checkName(name){   //验证name
 58         if(name != ""){  //不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确
 59             removeClass(ele.name,"borderRed");  //移除class
 60             document.images[0].setAttribute("src","./img/gou.png"); //对应图标
 61             document.images[0].style.display = "inline"; //显示
 62             return true;
 63         }else{  //name不符合
 64             addClass(ele.name,"borderRed"); //添加class
 65             document.images[0].setAttribute("src","./img/gantan.png"); //对应图标
 66             document.images[0].style.display = "inline"; //显示
 67             return false;
 68         }
 69     }
 70     function checkPassw(passw1,passw2){  //验证密码
 71         if(passw1 == "" || passw2 == "" || passw1 !== passw2){  //两次密码输入不为空且不等  不符合
 72             addClass(ele.password,"borderRed");
 73             addClass(ele.R_password,"borderRed");
 74             document.images[1].setAttribute("src","./img/gantan.png");
 75             document.images[1].style.display = "inline";
 76             document.images[2].setAttribute("src","./img/gantan.png");
 77             document.images[2].style.display = "inline";
 78             return false;
 79         }else{    //密码输入正确
 80             removeClass(ele.password,"borderRed");
 81             removeClass(ele.R_password,"borderRed");
 82             document.images[1].setAttribute("src","./img/gou.png");
 83             document.images[1].style.display = "inline";
 84             document.images[2].setAttribute("src","./img/gou.png");
 85             document.images[2].style.display = "inline";
 86             return true;
 87         }
 88     }
 89     function checkEmail(email){   //验证邮箱
 90         var pattern =  /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;  
 91         if(!pattern.test(email)){  //email格式不正确
 92             addClass(ele.email,"borderRed");
 93             document.images[3].setAttribute("src","./img/gantan.png");
 94             document.images[3].style.display = "inline";
 95             ele.email.select();
 96             return false;
 97         }else{  //格式正确
 98             removeClass(ele.email,"borderRed");
 99             document.images[3].setAttribute("src","./img/gou.png");
100             document.images[3].style.display = "inline";
101             return true;
102         }
103     }
104 
105 
106     var ele = {  //存放各个input字段obj
107             name: document.getElementById("name"),
108             password: document.getElementById("password"),
109             R_password: document.getElementById("R_password"),
110             email: document.getElementById("email")
111         };
112         ele.name.onblur = function(){  //name失去焦点则检测
113             checkName(ele.name.value);
114         }
115         ele.password.onblur = function(){ //password失去焦点则检测
116             checkPassw(ele.password.value,ele.R_password.value);
117         }
118         ele.R_password.onblur = function(){ //R_password失去焦点则检测
119             checkPassw(ele.password.value,ele.R_password.value);
120         }
121         ele.email.onblur = function(){ //email失去焦点则检测
122             checkEmail(ele.email.value);
123         }
124 
125     function check(){   //表单提交则验证开始
126         var ok = false;
127         var nameOk = false;
128         var emailOk = false;
129         var passwOk = false;
130         
131         if(checkName(ele.name.value)){ nameOk = true; }   //验证name
132         if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //验证password
133         if(checkEmail(ele.email.value)){ emailOk = true; }   //验证email
134 
135         if(nameOk && passwOk && emailOk){ 
136             alert("Tip: Register Success ..");   //注册成功
137             //return true; 
138         }
139         return false;   //有误，注册失败
140     }
141     </script>
142 </body>
143 </html>