13.完整的表单验证 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2 "http://www.w3.org/TR/html4/loose.dtd">
  3 <html>
  4 <head>
  5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6 <title>25完整的表单验证</title>
  7  <script type="text/javascript">
  8  /*
  9  
 10  需求： 1.用户名不能为空
 11          2.用户名长度为6-14
 12         3.密码不能为空
 13         4.密码长度不能小于6
 14         5.确认密码要与密码一致
 15  
 16  */
 17  
 18      //首先为String类扩展trim方法用来去除首尾空格
 19      String.prototype.trim=function(){
 20     
 21         return this.replace(/^\s+/,"").replace(/\+$/,"");
 22     
 23     }
 24 
 25     function checkUsername(username){//检查用户名是否符合要求
 26     
 27         var flag=false;
 28         username=username.trim();//将用户名首尾空格去掉
 29         var usernameError=document.getElementById("usernameError");//获取span对象，用来展示用户名错误信息
 30         
 31         if(username.length==0){
 32         
 33             usernameError.innerHTML="<font color='red'>用户名不能为空</font>";
 34             flag=false;
 35         
 36         }else if(username.length<6||username.length>14){
 37         
 38             usernameError.innerHTML="<font color='red'>用户名长度为6-14之间</font>"
 39             flag=false;
 40         
 41         }else{
 42         
 43             usernameError.innerHTML="";
 44             flag=true;
 45         
 46         }
 47         return flag;
 48     }
 49     
 50     function clearUsernameError(){//当输入用户名的文本框获得焦点则清楚用户名错误信息
 51     
 52         var usernameError=document.getElementById("usernameError");
 53         usernameError.innerHTML="";
 54     
 55     }
 56     
 57     function checkPwd(pwd){//检查密码是否符合要求
 58     
 59         var flag=false;
 60         var pwdError=document.getElementById("pwdError");//获取span对象，用来展示密码错误信息
 61         
 62         if(pwd.length==0){
 63         
 64             pwdError.innerHTML="<font color='red'>密码不能为空</font>"
 65             flag=false;
 66         
 67         }else if(pwd.length<6){
 68         
 69             pwdError.innerHTML="<font color='red'>密码长度不可以小于6</font>"
 70             flag=false;
 71         
 72         }else{
 73             
 74             pwdError.innerHTML="";
 75             flag=true;
 76         
 77         }
 78         return flag;
 79     }
 80     
 81     function clearPwdError(){//当输入密码的文本框获得焦点的时候，清楚密码错误信息
 82     
 83         var pwdError=document.getElementById("pwdError");
 84         pwdError.innerHTML="";
 85     
 86     }
 87     
 88     function checkSame(conformPwd){//检查验密码与密码是否一致
 89     
 90         var flag=false;
 91         var pwd=document.getElementById("pwd").value;//获取密码值
 92         var conformPwdError=document.getElementById("conformPwdError");
 93         if(pwd!=conformPwd){//若两次面不一致，则出现错误信息
 94         
 95             conformPwdError.innerHTML="<font color='red'>两次密码不一致</font>"
 96             flag=false;
 97         
 98         }else{
 99         
100             conformPwdError.innerHTML="";
101             flag=true;
102         
103         }
104         return flag;
105     }
106     
107     function clearConformPwdError(){//当第二次输出密码的文本框获得焦点的时候，则清除展示两次密码不一样的信息
108     
109         var conformPwdError=document.getElementById("conformPwdError");
110         conformPwdError.innerHTML="";
111     }
112     
113     function checkAll(){
114     
115         var username=document.getElementById("username").value;
116         var pwd=document.getElementById("pwd").value;
117         var conformPwd=document.getElementById("conformPwd").value;
118         
119         if(checkUsername(username)&&checkPwd(pwd)&&checkSame(conformPwd)){
120         
121             document.forms["userForm"].action="http://localhost:8080/oa/register";
122             document.forms["userForm"].method="get";
123             document.forms["userForm"].submit();
124         
125         }
126     
127     }
128 
129  </script>
130 </head>
131 
132 
133 <body>
134 
135     <form name="userForm">
136     
137         用户名
138             <input type="text" name="username" id="username" onblur="checkUsername(this.value)" onfocus="clearUsernameError()"/>
139             <span id="usernameError"></span>
140             </br>
141         密码
142             <input type="password" name="pwd" id="pwd" onblur="checkPwd(this.value)" onfocus="clearPwdError()"/>
143             <span id="pwdError"></span>
144             </br>
145         确认密码
146             <input type="password" name="conformPwd" id="conformPwd" onblur="checkSame(this.value)" onfocus="clearConformPwdError()"/>
147             <span id="conformPwdError"></span>
148             </br>
149             
150             <input type="button" value="注册" onclick="checkAll()" />    
151     </form>
152 
153 </body>
154 </html>

 

posted @ 2017-11-21 19:14  xzy不会飞的地板流  阅读(685)  评论(0)    收藏  举报