根据所学知识和查找网上资料所写，有错误或不足之处欢迎指正。
实现的效果如下图（网络图片）所示：
开始写代码
注册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 { 3var arr = new Array(); 4arr[1 ]=new Array("池阳街道","秋浦街道","里山街道","江口街道","梅龙街道","马衙街道","墩上街道","秋江街道","杏花村街道","清风街道","清溪街道","殷汇镇","牛头山镇","涓桥镇","梅街镇","梅村镇","唐田镇","牌楼镇","乌沙镇","棠溪镇"); 5arr[2 ]=new Array("蓉城镇","木镇镇","庙前镇","陵阳镇","新河镇","丁桥镇","朱备镇","杨田镇","九华镇","酉华镇","乔木乡","杜村乡","九华乡"); 6arr[3 ]=new Array("尧渡镇","东流镇","大渡口镇","胜利镇","张溪镇","洋湖镇","葛公镇","香隅镇","官港镇","昭潭镇","龙泉镇","泥溪镇","花园里乡","木塔乡","青山乡"); 7arr[4 ]=new Array("仁里镇","七都镇","仙寓镇","丁香镇","小河镇","横渡镇","大演乡","矶滩乡"); 8 9document.getElementById("town").options.length=0;10for(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 { 3var img = document.getElementById("demo_img"); 4var pwd = document.getElementById("pwd"); 56if (pwd.type == "password") 7{ 8 pwd.type = "text"; 9 img.src = "image/invisible.png";10}else11{12 pwd.type = "password";13 img.src = "image/visible.png";14}15 }16 17 function hideShowRepwd()18 {19var img = document.getElementById("demo_img2");20var pwd = document.getElementById("repwd");21 22if (pwd.type == "password") 23{24 pwd.type = "text";25 img.src = "image/invisible.png";26}27else28{29 pwd.type = "password";30 img.src = "image/visible.png";31}32 }
重点来了，vali.js——用正则表达式验证表单
1 //检验用户名 2 function checkLname() 3 { 4var lname = document.getElementById("lname").value; 5var spanNode = document.getElementById("lnamespan"); 6var tip = document.getElementById("DLMtip"); 7var reg = /^[\u4E00-\u9FA5|A-Za-z]([a-zA-Z0-9_\u4e00-\u9fa5]){3,20}$/; //^'和'$' 作用是分别指出一个字符串的开始和结束。 8 9if(reg.test(lname)) 10{ 11tip.innerHTML = "";//向对象插入""里的内容 12spanNode.innerHTML = "正确".fontcolor("green"); 13 return true; 14} 15else 16{ 17tip.innerHTML = "*".fontcolor("red"); 18spanNode.innerHTML = "3-20位，中文、字母、数字、下划线的组合，以中文或字母开头"; 19return false; 20} 21 } 22 23 //检验姓名 24 function checkName() 25 { 26var name = document.getElementById("name").value; 27var spanNode = document.getElementById("namespan"); 28var tip = document.getElementById("XMtip"); 29var reg = /^[\u4e00-\u9fa5]{2,4}$/; 3031if(reg.test(name)) 32{ 33 tip.innerHTML = ""; 34 spanNode.innerHTML = "正确".fontcolor("green"); 35 return true; 36} 37else 38{ 39 tip.innerHTML = "*".fontcolor("red"); 40 spanNode.innerHTML = "请填写姓名"; 41 return false; 42} 43 } 44 45 46 //检验身份证号 47 function checkNumber() 48 { 49var number = document.getElementById("number").value; 50var spanNode = document.getElementById("numberspan"); 51var tip = document.getElementById("SFZtip"); 52var reg =/^\d{17}X$|^\d{18}$/; 5354if(reg.test(number)) 55{ 56 tip.innerHTML = ""; 57 spanNode.innerHTML = "正确".fontcolor("green"); 58 return true; 59} 60else 61{ 62 tip.innerHTML = "*".fontcolor("red"); 63 spanNode.innerHTML = "请填写身份证号"; 64 return false; 65} 66 } 67 68 69 //检验手机号 70 function checkPhone() 71 { 72var phone = document.getElementById("phone").value; 73var spanNode = document.getElementById("phonespan"); 74var tip = document.getElementById("SJHtip"); 75var reg = /^1[34578][0-9]{9}$/; 76 77if(reg.test(phone)) 78{ 79tip.innerHTML = ""; 80spanNode.innerHTML = "正确".fontcolor("green"); 81return true; 82} 83else 84{ 85tip.innerHTML = "*".fontcolor("red"); 86spanNode.innerHTML = "请填写11位有效的手机号码"; 87return false; 88} 89 } 90 91 92 //检验用户分类 93 function checkType() 94 { 95var type= document.getElementById("type").value; 96var spanNode = document.getElementById("typespan"); 97var tip = document.getElementById("YHFLtip"); 98 99if(type!="0")100{101tip.innerHTML = ""; 102spanNode.innerHTML = "正确".fontcolor("green"); 103return true; 104}105else106{107tip.innerHTML = "*".fontcolor("red"); 108spanNode.innerHTML = "请填选择身份类型"; 109return false;110}111 }112 113 //检验区县114 function checkCounty()115 {116var county = document.getElementById("county").value;117var spanNode = document.getElementById("countyspan");118var tip = document.getElementById("QXtip"); 119120if(county!="0")121{122tip.innerHTML = ""; 123spanNode.innerHTML = "正确".fontcolor("green"); 124return true; 125}126else127{128tip.innerHTML = "*".fontcolor("red"); 129spanNode.innerHTML = "请填选择区县"; 130return false;131}132 }133 134 //检验街道乡镇135 function checkTown()136 {137var town = document.getElementById("town").value;138var spanNode = document.getElementById("townspan");139var tip = document.getElementById("JDXZtip"); 140141if(town!="0")142{143tip.innerHTML = ""; 144spanNode.innerHTML = "正确".fontcolor("green"); 145return true; 146}147else148{149tip.innerHTML = "*".fontcolor("red"); 150spanNode.innerHTML = "请填选择街道/乡镇"; 151return false;152}153 }154 155 //检验密码156 function checkPwd()157 {158var pwd = document.getElementById("pwd").value;159var spanNode = document.getElementById("pwdspan");160var tip = document.getElementById("MMtip"); 161var reg = /^[\s\S]{6,20}$/; // \s:[a-zA-Z0-9] ; \S 取反：非空白字符162163if(reg.test(pwd))164{165tip.innerHTML = ""; 166spanNode.innerHTML = "正确".fontcolor("green"); 167return true; 168}169else170{171tip.innerHTML = "*".fontcolor("red"); 172spanNode.innerHTML = "6-20位英文(区分大小写)、数字、字符的组合"; 173return false;174}175 }176 177 //检验确认密码178 function checkRepwd()179 {180var pwd = document.getElementById("pwd").value;181var repwd = document.getElementById("repwd").value;182var spanNode = document.getElementById("repwdspan");183var tip = document.getElementById("QRMMtip"); 184var reg = /^[\s\S]{6,20}$/;185186if(reg.test(repwd))187{188if(pwd==repwd)189 {190 tip.innerHTML = ""; 191 spanNode.innerHTML = "正确".fontcolor("green"); 192 return true; 193}194 else195 {196 tip.innerHTML = "*".fontcolor("red"); 197 spanNode.innerHTML = "请再输入一遍上面的密码"; 198 return false;199}200}201else202{203tip.innerHTML = "*".fontcolor("red"); 204spanNode.innerHTML = "请再输入一遍上面的密码"; 205return false;206}207 }208 209 //全部验证成功再提交表单 210 function checkAll()211 {212var lname=checkLname();213var name=checkName();214var number=checkNumber();215var phone=checkPhone();216var type=checkType();217var county=checkCounty();218var town = checkTown();219var pwd = checkPwd();220var repwd= checkRepwd();221222if(lname&&name&&number&&phone&&type&&county&&town&&pwd&&repwd)223{224 return true;225}226else227{228return 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>
出来的默认效果就是这样
填写信息为空或错误时
填写的信息符合正则表达式后
全部正确点击提交按钮进入注册成功页面
