你的位置:首页 > Java教程

[Java教程]简单的注册模块表单验证处理

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

如图

有简单的验证提示功能

具体可以  查看演示

 

代码思路也比较简单

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

表单具有 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="/images/loading4.gif" data-original="./img/gou.png" width="20px" height="20px"></p>19       <p><label for="password">Password: </label>20       <input type="password" id="password" >21       <img src="/images/loading4.gif" data-original="./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="/images/loading4.gif" data-original="./img/gou.png" width="20px" height="20px"></p>25       <p><label for="email">Email: </label>26       <input type="text" id="email" >27       <img src="/images/loading4.gif" data-original="./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 ="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="/images/loading4.gif" data-original="./img/gou.png" width="20px" height="20px"></p> 28       <p><label for="password">Password: </label> 29       <input type="password" id="password" > 30       <img src="/images/loading4.gif" data-original="./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="/images/loading4.gif" data-original="./img/gou.png" width="20px" height="20px"></p> 34       <p><label for="email">Email: </label> 35       <input type="text" id="email" > 36       <img src="/images/loading4.gif" data-original="./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字段obj107       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; }  //验证name132     if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //验证password133     if(checkEmail(ele.email.value)){ emailOk = true; }  //验证email134 135     if(nameOk && passwOk && emailOk){ 136       alert("Tip: Register Success ..");  //注册成功137       //return true; 138     }139     return false;  //有误,注册失败140   }141   </script>142 </body>143 </html>

View Code