使用正则表达式实现注册表单验证（包括下拉列表二级联动、密码显示和隐藏）

根据所学知识和查找网上资料所写，有错误或不足之处欢迎指正。

实现的效果如下图（网络图片）所示：

开始写代码

注册html页面——先简单的利用table标签和input标签写出来（上面的图片用ps制作）。

 1 <form method="post" action="regisucc.html" onsubmit="return checkall();">
 2             <div class="head"><img src="image/img_1.png" /></div>
 3             <div class="foot">
 4                 <table> 
 5                     <tr>
 6                         <td class="left"><span id="dlmtip"></span>登录名：</td>
 7                         <td class="center"><input type="text" name="lname" id="lname" onblur="checklname()" /></td>
 8                         <td class="right"><span id="lnamespan" class="spa" ></span></td>
 9                     </tr>
10                     <tr>
11                         <td class="left"><span id="xmtip"></span>姓名：</td>
12                         <td class="center"><input type="text" name="name" id="name" onblur="checkname()" /></td>     
13                         <td class="right"><span id="namespan" class="spa" ></span></td>
14                     </tr>
15                     <tr>
16                         <td class="left"><span id="sfztip"></span>身份证号：</td>
17                         <td class="center"><input type="text" name="number" id="number" onblur="checknumber()" /></td>
18                         <td class="right"><span id="numberspan" class="spa"></span></td>
19                     </tr>     
20                     <tr>
21                         <td class="left"><span id="sjhtip"></span>手机号：</td>
22                         <td class="center"><input type="text" name="phone" id="phone" onblur="checkphone()" /></td>
23                         <td class="right"><span id="phonespan" class="spa"></span></td>
24                     </tr>     
25                     <tr>
26                         <td class="left"><span id="yhfltip"></span>用户分类：</td>
27                         <td class="center">
28                             <select name="type" id="type" onblur="checktype()">
29                                 <option value="0"></option>
30                                 <option value="普通用户" style="display: none">普通用户</option>
31                                 <option value="会员">会员</option>
32                             </select>   
33                         </td>
34                         <td class="right"><span id="typespan" class="spa"></span></td>
35                     </tr>     
36                     <tr>
37                         <td class="left"><span id="qxtip"></span>区县：</td>
38                         <td class="center">
39                             <select name="county" id="county" onchange="change(this.value)" onblur="checkcounty()">
40                                 <option value="0" style="display: none"></option>
41                                 <option value="1">贵池区</option>
42                                 <option value="2">青阳县</option>
43                                 <option value="3">东至县</option>
44                                 <option value="4">石台县</option>
45                             </select>
46                         </td>
47                         <td class="right"><span id="countyspan" class="spa"></span></td>
48                     </tr>     
49                     <tr>
50                         <td class="left"><span id="jdxztip"></span>街道/乡镇：</td>
51                         <td class="center">
52                             <select id="town" name="town" onblur="checktown()">
53                                 <option value="0"></option>
54                             </select>
55                         </td>
56                         <td class="right"><span id="townspan" class="spa"></span></td>
57                     </tr>     
58                     <tr>
59                         <td class="left"><span id="mmtip"></span>密码：</td>
60                         <td class="center">
61                             <input type="password" id="pwd" name="pwd" onblur="checkpwd()" />
62                             <img class="demo_img" id="demo_img" onclick="hideshowpwd()" src="image/visible.png" />
63                         </td>
64                         <td class="right"><span id="pwdspan" class="spa" ></span></td>
65                     </tr>    
66                     <tr>
67                         <td class="left"><span id="qrmmtip"></span>确认密码：</td>
68                         <td class="center">
69                             <input type="password" id="repwd" name="repwd" onblur="checkrepwd()" />
70                             <img class="demo_img2" id="demo_img2" onclick="hideshowrepwd()" src="image/visible.png" />  
71                         </td>
72                         <td class="right"><span id="repwdspan" class="spa"></span></td>
73                     </tr>       
74                     <tr>
75                         <td class="left"></td>
76                         <td class="center"><input type="submit" class="but" value="提交" /></td>
77                         <td class="right"></td>
78                     </tr>      
79                 </table>
80             </div>
81         </form>

然后是js文件

area.js——下拉列表二级联动

 1 function change(value)                   
 2 {
 3     var arr = new  array();                                 
 4     arr[1 ]=new array("池阳街道","秋浦街道","里山街道","江口街道","梅龙街道","马衙街道","墩上街道","秋江街道","杏花村街道","清风街道","清溪街道","殷汇镇","牛头山镇","涓桥镇","梅街镇","梅村镇","唐田镇","牌楼镇","乌沙镇","棠溪镇");
 5     arr[2 ]=new array("蓉城镇","木镇镇","庙前镇","陵阳镇","新河镇","丁桥镇","朱备镇","杨田镇","九华镇","酉华镇","乔木乡","杜村乡","九华乡");
 6     arr[3 ]=new array("尧渡镇","东流镇","大渡口镇","胜利镇","张溪镇","洋湖镇","葛公镇","香隅镇","官港镇","昭潭镇","龙泉镇","泥溪镇","花园里乡","木塔乡","青山乡");
 7     arr[4 ]=new array("仁里镇","七都镇","仙寓镇","丁香镇","小河镇","横渡镇","大演乡","矶滩乡");
 8           
 9     document.getelementbyid("town").options.length=0;          
10     for(var m =0 ;m<arr[value].length;m++)                    
11     {                                                          
12         var opt=document.createelement("option");             
13         var node=document.createtextnode(arr[value][m]+"");    
14         opt.appendchild(node);                              
15         document.getelementbyid("town").appendchild(opt);      
16     }
17 } 

pwd.js——密码显示与隐藏(点击事件)

两张眼睛图片在网上下载

另 有些浏览器是自带密码显示隐藏功能的，无需此步骤。

 1 function hideshowpwd()
 2 {
 3     var img = document.getelementbyid("demo_img");
 4     var pwd = document.getelementbyid("pwd");
 5         
 6     if (pwd.type == "password") 
 7     {
 8         pwd.type = "text";
 9         img.src = "image/invisible.png";
10     }else
11     {
12         pwd.type = "password";
13         img.src = "image/visible.png";
14     }
15 }
16 
17 function hideshowrepwd()
18 {
19     var img = document.getelementbyid("demo_img2");
20     var pwd = document.getelementbyid("repwd");
21         
22     if (pwd.type == "password") 
23     {
24         pwd.type = "text";
25         img.src = "image/invisible.png";
26     }
27     else
28     {
29         pwd.type = "password";
30         img.src = "image/visible.png";
31     }
32 }

重点来了，vali.js——用正则表达式验证表单

  1 //检验用户名
  2 function checklname()
  3 {
  4     var lname = document.getelementbyid("lname").value;
  5     var spannode = document.getelementbyid("lnamespan");
  6     var tip = document.getelementbyid("dlmtip");
  7     var reg = /^[\u4e00-\u9fa5|a-za-z]([a-za-z0-9_\u4e00-\u9fa5]){3,20}$/;   //^'和'$' 作用是分别指出一个字符串的开始和结束。 
  8           
  9     if(reg.test(lname))
 10     {
 11          tip.innerhtml = "";      //向对象插入""里的内容
 12          spannode.innerhtml = "正确".fontcolor("green");  
 13         return true;  
 14     }
 15     else
 16     {
 17          tip.innerhtml = "*".fontcolor("red"); 
 18          spannode.innerhtml = "3-20位，中文、字母、数字、下划线的组合，以中文或字母开头"; 
 19          return false; 
 20     }
 21 }
 22 
 23 //检验姓名
 24 function checkname()
 25 {
 26     var name = document.getelementbyid("name").value;
 27     var spannode = document.getelementbyid("namespan");
 28     var tip = document.getelementbyid("xmtip");  
 29     var reg = /^[\u4e00-\u9fa5]{2,4}$/;
 30     
 31     if(reg.test(name))
 32     {
 33         tip.innerhtml = ""; 
 34         spannode.innerhtml = "正确".fontcolor("green");  
 35         return true;  
 36     }
 37     else
 38     {
 39         tip.innerhtml = "*".fontcolor("red"); 
 40         spannode.innerhtml = "请填写姓名"; 
 41         return false; 
 42     }
 43 }
 44 
 45 
 46 //检验身份证号
 47 function checknumber()
 48 {
 49     var number = document.getelementbyid("number").value;
 50     var spannode = document.getelementbyid("numberspan");
 51     var tip = document.getelementbyid("sfztip");  
 52     var reg =/^\d{17}x$|^\d{18}$/;
 53     
 54     if(reg.test(number))
 55     {
 56         tip.innerhtml = ""; 
 57         spannode.innerhtml = "正确".fontcolor("green");  
 58         return true;  
 59     }
 60     else
 61     {
 62         tip.innerhtml = "*".fontcolor("red"); 
 63         spannode.innerhtml = "请填写身份证号"; 
 64         return false; 
 65     }
 66 }
 67 
 68 
 69 //检验手机号
 70 function checkphone()
 71 {
 72      var phone = document.getelementbyid("phone").value;
 73      var spannode = document.getelementbyid("phonespan");
 74      var tip = document.getelementbyid("sjhtip");  
 75      var reg = /^1[34578][0-9]{9}$/;
 76      
 77      if(reg.test(phone))
 78     {
 79          tip.innerhtml = ""; 
 80          spannode.innerhtml = "正确".fontcolor("green");  
 81          return true;  
 82      }
 83     else
 84     {
 85          tip.innerhtml = "*".fontcolor("red"); 
 86          spannode.innerhtml = "请填写11位有效的手机号码"; 
 87          return false; 
 88      }
 89 }
 90 
 91 
 92 //检验用户分类
 93 function checktype()
 94 {
 95      var type= document.getelementbyid("type").value;
 96      var spannode = document.getelementbyid("typespan");
 97      var tip = document.getelementbyid("yhfltip");  
 98      
 99     if(type!="0")
100     {
101          tip.innerhtml = ""; 
102          spannode.innerhtml = "正确".fontcolor("green");  
103          return true;  
104      }
105     else
106     {
107          tip.innerhtml = "*".fontcolor("red"); 
108          spannode.innerhtml = "请填选择身份类型"; 
109          return false; 
110      }
111 }
112 
113 //检验区县
114 function checkcounty()
115 {
116      var county = document.getelementbyid("county").value;
117      var spannode = document.getelementbyid("countyspan");
118      var tip = document.getelementbyid("qxtip");  
119      
120      if(county!="0")
121     {
122          tip.innerhtml = ""; 
123          spannode.innerhtml = "正确".fontcolor("green");  
124          return true;  
125      }
126     else
127     {
128          tip.innerhtml = "*".fontcolor("red"); 
129          spannode.innerhtml = "请填选择区县"; 
130          return false; 
131      }
132 }
133 
134 //检验街道乡镇
135 function checktown()
136 {
137      var town = document.getelementbyid("town").value;
138      var spannode = document.getelementbyid("townspan");
139      var tip = document.getelementbyid("jdxztip");  
140      
141      if(town!="0")
142     {
143          tip.innerhtml = ""; 
144          spannode.innerhtml = "正确".fontcolor("green");  
145          return true;  
146      }
147     else
148     {
149          tip.innerhtml = "*".fontcolor("red"); 
150          spannode.innerhtml = "请填选择街道/乡镇"; 
151          return false; 
152      }
153 }
154 
155 //检验密码
156 function checkpwd()
157 {
158      var pwd = document.getelementbyid("pwd").value;
159      var spannode = document.getelementbyid("pwdspan");
160      var tip = document.getelementbyid("mmtip");  
161      var reg = /^[\s\s]{6,20}$/;       // \s:[a-za-z0-9] ; \s 取反：非空白字符
162      
163      if(reg.test(pwd))
164     {
165          tip.innerhtml = ""; 
166          spannode.innerhtml = "正确".fontcolor("green");  
167          return true;  
168      }
169     else
170     {
171          tip.innerhtml = "*".fontcolor("red"); 
172          spannode.innerhtml = "6-20位英文(区分大小写)、数字、字符的组合"; 
173          return false; 
174      }
175 }
176 
177 //检验确认密码
178 function checkrepwd()
179 {
180     var pwd = document.getelementbyid("pwd").value;
181      var repwd = document.getelementbyid("repwd").value;
182      var spannode = document.getelementbyid("repwdspan");
183      var tip = document.getelementbyid("qrmmtip");  
184      var reg = /^[\s\s]{6,20}$/;
185      
186     if(reg.test(repwd))
187     {
188          if(pwd==repwd)
189         {
190              tip.innerhtml = ""; 
191              spannode.innerhtml = "正确".fontcolor("green");  
192              return true;  
193          }
194         else
195         {
196              tip.innerhtml = "*".fontcolor("red"); 
197              spannode.innerhtml = "请再输入一遍上面的密码"; 
198              return false; 
199          }
200      }
201     else
202     {
203          tip.innerhtml = "*".fontcolor("red"); 
204          spannode.innerhtml = "请再输入一遍上面的密码"; 
205          return false; 
206     }
207 }
208   
209 //全部验证成功再提交表单  
210 function checkall()
211 {
212     var lname=checklname();
213     var name=checkname();
214     var number=checknumber();
215     var phone=checkphone();
216     var type=checktype();
217     var county=checkcounty();
218     var town = checktown();
219     var pwd = checkpwd();
220     var repwd= checkrepwd();
221          
222     if(lname&&name&&number&&phone&&type&&county&&town&&pwd&&repwd)
223     {
224         return true;
225     }
226     else
227     {
228          return false;
229     }
230 }

 

css根据自己的喜好写就行了。

 

补一个注册成功的界面

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>注册成功</title>
 6         <link rel="stylesheet" href="css/common.css" type="text/css"/>
 7         <link rel="stylesheet" href="css/regisucc.css" type="text/css"/>
 8     </head>
 9     <body>
10         <div class="head"><img src="image/img_2.png" /></div>
11         <div class="foot1">
12             <p>恭喜你！注册成功</p>
13             <a href="register.html">返回注册页面</a>
14         </div>
15     </body>
16 </html>

 

出来的默认效果就是这样

 

填写信息为空或错误时

填写的信息符合正则表达式后

 全部正确点击提交按钮进入注册成功页面