JavaScript + 正则表达式 完成简单表单验证

自己写的一个简单表单验证：

  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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>表单验证</title>
  6 <script language="javascript">
  7 function checkUserNum(str){
  8     if(str.length<3 || str.length>18){
  9         document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号长度在3-18字符内</font>";
 10         form1.password.focus();
 11         return false;
 12     }
 13      var flag = str.match(/\D/)==null;
 14      if(!flag==true){
 15          document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号必须有0-9数字组成</font>";
 16          form1.usernum.focus();
 17          return false;
 18      }
 19      document.getElementById("usernumErr").innerHTML = "";
 20      return true;
 21 };
 22 
 23 function checkUserName(username){
 24     if(username.length == 0){
 25         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";
 26         form1.username.focus();
 27         return false;
 28     }
 29     var patn =   /^[a-zA-Z]+[a-zA-Z0-9]+$/;
 30     if(!patn.test(username)){
 31         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)</font>";
 32         form1.username.focus();
 33         return false;
 34     }
 35     document.getElementById("usernameErr").innerHTML = "";
 36     return true;
 37 };
 38 
 39 function checkPwd(str){
 40     if(str.length<3 || str.length>18){
 41         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码长度在3-18字符内</font>";
 42         form1.password.focus();
 43         return false;
 44     }
 45     if(escape(str).indexOf("%u")!=-1){
 46         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能含有中文</font>";
 47         form1.password.focus();
 48         return false;
 49     }
 50    document.getElementById("passwordErr").innerHTML = "";
 51    return true;
 52 };
 53 
 54 function confrimPwd(str){
 55     var pwd = document.form1.password.value;
 56     if(str!=pwd){
 57         document.getElementById("password2Err").innerHTML = "<font color='red'>密码不一致!</font>";
 58         form1.password2.value="";
 59         form1.password2.focus();
 60         return false;
 61     }
 62    document.getElementById("password2Err").innerHTML = "";
 63    return true;
 64 };
 65 
 66 function checkEmail(email){
 67    if(email==""){
 68       document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";        
 69       form1.email.focus();            
 70       return false;            
 71    }
 72    var reg=new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");
 73    if(!reg.test(email)){
 74      document.getElementById("emailErr").innerHTML = "<font color='red'>E-MAIL格式输入不正确!</font>";
 75      form1.email.focus();                
 76      return false;
 77    }
 78         
 79     document.getElementById("emailErr").innerHTML = "";
 80     return true;
 81 
 82 };
 83 
 84 function checkTel(tel){
 85     
 86     var i,j,strTemp;
 87     strTemp="0123456789-()#";
 88     for(i=0;i<tel.length;i++){
 89       j=strTemp.indexOf(tel.charAt(i));
 90       if(j==-1){
 91         document.getElementById("telErr").innerHTML = "<font color='red'>Tel格式输入不正确!</font>";
 92         form1.tel.focus();    
 93         return false;
 94       }
 95     }
 96     document.getElementById("telErr").innerHTML = "";
 97     return true;
 98 };
 99 
100 function checkForm(){
101     
102     if(document.form1.usernum.value.length == 0){
103         document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号不能为空</font>";
104         form1.usernum.focus();
105         return false;
106     }
107     if(document.form1.username.value.length == 0){
108         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";
109         form1.username.focus();
110         return false;
111     }
112     if(document.form1.password.value.length == 0){
113         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能为空</font>";
114         form1.password.focus();
115         return false;
116     }
117     if( !(form1.sex[0].checked || form1.sex[1].checked) ){
118         document.getElementById("sexErr").innerHTML = "<font color='red'>请选择性别</font>";
119         form1.sex[0].focus();
120         return false;
121     }
122     if(document.form1.email.value==""){
123       document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";        
124       form1.email.focus();            
125       return false;            
126    }
127     document.getElementById("usernumErr").innerHTML = "";
128     document.getElementById("usernameErr").innerHTML = "";
129     document.getElementById("passwordErr").innerHTML = "";
130     document.getElementById("sexErr").innerHTML = "";
131     document.getElementById("emailErr").innerHTML = "";
132     return true;
133 
134 };
135 
136 
137 
138 </script>
139 </head>
140 
141 <body>
142 
143 <form name="form1" action="#" method="post" onsubmit="return checkForm();" >
144 
145   <table width="0" border="1">
146     <tr>
147       <th scope="row">UserNumber:</th>
148       <td>
149        <input type="text" name="usernum" onblur="return checkUserNum(this.value);" />
150        <span id="usernumErr"></span>
151       </td>
152     </tr>
153     <tr>
154       <th scope="row">UserName:</th>
155       <td>  
156        <input type="text" name="username" onblur="return checkUserName(this.value);" />
157        <span id="usernameErr"></span>
158       </td>
159     </tr>
160     <tr>
161       <th scope="row">PassWord:</th>
162       <td>
163        <input type="password" name="password" onblur="return checkPwd(this.value);" />
164        <span id="passwordErr"></span>
165       </td>
166     </tr>
167     <tr>
168       <th scope="row">ConfirmPassword:</th>
169       <td>
170        <input type="password" name="password2" onblur="return confrimPwd(this.value);" />
171        <span id="password2Err"></span>
172       </td>
173     </tr>
174     <tr>
175       <th scope="row">sex</th>
176       <td>
177       <input type="radio" name="sex" value="男" />男
178       <input type="radio" name="sex" value="女" />女
179       <span id="sexErr"></span>
180       </td>
181     </tr>
182      <tr>
183       <th scope="row">Email:</th>
184       <td>
185        <input type="text" name="email" onblur="return checkEmail(this.value);" />
186        <span id="emailErr"></span>
187       </td>
188     </tr>
189      <tr>
190       <th scope="row">Tel:</th>
191       <td>
192        <input type="text" name="tel" onblur="return checkTel(this.value);" />
193        <span id="telErr"></span>
194       </td>
195     </tr> <tr>
196       <th scope="row">&nbsp;</th>
197       <td>&nbsp;</td>
198     </tr>
199     <tr>
200       <th scope="row"><input type="submit" value="submit" /></th>
201       <td><input type="reset" value="reset" /></td>
202     </tr>
203   </table>
204 
205 </form>
206 </body>
207 </html>
posted @ 2012-10-13 17:49  高友龙  阅读(157)  评论(0)    收藏  举报