Form表单验证：
js基础考试内容，form表单验证，正则表达式，blur事件，自动获取数组，以及css布局样式，动态清除等。完整代码如下：
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>form-lpb</title> 6 <style> 7 body { 8 background:#CCF; 9 font-size:12px; 10 } 11 .box { 12 margin:20px 50px; 13 line-height:25px; 14 } 15 .box .box_sel { 16 margin-left:25px; 17 } 18 .text { 19 text-align:right; 20 } 21 span { 22 color:#900; 23 } 24 .length { 25 width:38px; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div class="box"> 32 <!--form star--> 33 <form action="submit.html" onsubmit="return checkAll()"> 34 <table> 35 <tr> 36 <td class="text">账号</td> 37 <td><input type="text" id="userName" onblur="b_userName()" /></td> 38 <td><span id="span_userName"></span></td> 39 </tr> 40 <tr> 41 <td class="text"> 密码</td> 42 <td><input type="password" id="pass" onblur="b_pass()" /></td> 43 <td> <span id="span_pass"></span></td> 44 </tr> 45 <tr> 46 <td class="text">重复密码</td> 47 <td><input type="password" id="pass1" onblur="b_pass1()" /></td> 48 <td> <span id="span_pass1"></span></td> 49 </tr> 50 <tr> 51 <td class="text">手机号</td> 52 <td><input type="text" id="tel" onblur="b_tel()" /></td> 53 <td> <span id="span_tel"></span></td> 54 </tr> 55 <tr> 56 <td class="text">身份证号</td> 57 <td><input type="text" id="idCard" onblur="b_idCard()" /></td> 58 <td><span id="span_idCard"></span></td> 59 </tr> 60 <tr> 61 <td class="text">出生年月日</td> 62 <td> 63 <input type="text" id="year" class="length" disabled="disabled" /> 64 <input type="text" id="month" class="length" disabled="disabled" /> 65 <input type="text" id="day" class="length" disabled="disabled" /> 66 </td> 67 </tr> 68 <tr> 69 <td class="text"> 邮箱</td> 70 <td><input type="text" id="email" onblur="b_email()" /></td> 71 <td><span id="span_email"></span></td> 72 </tr> 73 </table> 74 <div class="box_sel"> 75 爱好 76 <select> 77 <option>篮球</option> 78 <option>足球</option> 79 <option>排球</option> 80 </select> 81 地区 82 <select> 83 <option>河南</option> 84 <option>湖南</option> 85 <option>河北</option> 86 </select> 87 <br /> 88 <input type="checkbox" id="ch_box" onclick="c_box()" /> 89 是否同意 90 <a href="xieyi.html" target="_blank">公司协议</a> 91 <br /> 92 <input type="submit" id="sub" value="提交注册" disabled="disabled" /> 93 <input type="reset" id="rst" value="重新填写" onclick="sub_return()" /> 94 </div> 95 </form> 96 <!--end form --> 97 </div> 98 <script> 99 // 用户名 校验 100 function b_userName(){ 101 var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用户名-正则表达式 102 var c_use = document.getElementById("userName").value; 103 var c_span_use = document.getElementById("span_userName"); 104 if(reg.test(c_use)){ 105 c_span_use.innerHTML="√"; 106 return true; 107 }else { 108 c_span_use.innerHTML="用户名必须以3-9个字母开头，可以有下划线_，后面3-9个数字"; 109 } 110 } 111 // 密码 校验 112 function b_pass(){ 113 var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密码-正则表达式 114 var c_pass = document.getElementById("pass").value; 115 var c_span_pass =document.getElementById("span_pass"); 116 if(reg.test(c_pass)){ 117 c_span_pass.innerHTML="√"; 118 return true; 119 } 120 121 else { 122 c_span_pass.innerHTML="密码必须以3-6个英文字母开头，后面3-9个数字"; 123 return false; 124 } 125 } 126 // 重复密码 校验、 127 function b_pass1(){ 128 var cm = document.getElementById("pass1").value; 129 var cm_sp = document.getElementById("span_pass1"); 130 var c_pass = document.getElementById("pass").value; 131 if(cm==c_pass&&cm!=""){ 132 cm_sp.innerHTML="√"; 133 return true; 134 }else{ 135 cm_sp.innerHTML="请重复密码"; 136 return false; 137 } 138 } 139 // 手机号 校验 140 function b_tel(){ 141 var reg = /^(+86)?[1][3,5,8][0-9]{9}$/; 142 var c_tel = document.getElementById("tel").value; 143 var c_span_tel = document.getElementById("span_tel"); 144 if(reg.test(c_tel)){ 145 c_span_tel.innerHTML="√"; 146 return true; 147 }else { 148 c_span_tel.innerHTML="手机号可以（+86）第一位是1，第二位是【3,5,8】，共11位数字"; 149 return false; 150 } 151 } 152 // 身份证号 校验 153 function b_idCard(){ 154 var reg = /d{17}w{1}|d{15}/; 155 var c_idCard = document.getElementById("idCard").value; 156 var c_span_idCard = document.getElementById("span_idCard"); 157 if(reg.test(c_idCard)){ 158 c_span_idCard.innerHTML="√"; 159 document.getElementById("year").value=c_idCard.substr(6,4);// 自动 获取 年份 160 document.getElementById("month").value=c_idCard.substr(10,2);// 自动 获取 月份 161 document.getElementById("day").value=c_idCard.substr(12,2); 162 return true; 163 }else{ 164 c_span_idCard.innerHTML="身份证格式错误，必须是18位数或者是15位数"; 165 document.getElementById("year").value="";// 自动 获取 年份 166 document.getElementById("month").value="";// 自动 获取 月份 167 document.getElementById("day").value=""; 168 return false; 169 } 170 } 171 // 邮箱 校验 172 function b_email(){ 173 var reg = /w+@w+.w+/; 174 var c_email = document.getElementById("email").value; 175 var c_span_email = document.getElementById("span_email"); 176 if(reg.test(c_email)){ 177 c_span_email.innerHTML="√"; 178 return true; 179 }else { 180 c_span_email.innerHTML="邮箱格式错误，必须包含 @ 和 . "; 181 return false; 182 } 183 } 184 // 协议 校验 185 function c_box(){ 186 var c_b = document.getElementById("ch_box"); 187 var c_sub = document.getElementById("sub"); 188 if(c_b.checked){ 189 c_sub.disabled=false; 190 }else{ 191 c_sub.disabled=true; 192 } 193 } 194 // sub_return 当点击重新填写时 提交 按钮 恢复为不可用状态 195 function sub_return(){ 196 var subt = document.getElementById("sub"); 197 subt.disabled=true; 198 var span_clean = document.getElementsByTagName("span"); 199 200 for(var i=0;i<=span_clean.length;i++){ 201 var span1 = span_clean[i]; 202 span1.innerHTML= ""; 203 } 204 } 205 // 整体 校验 206 function checkAll(){ 207 var c1 =b_userName(); 208 var c2 =b_pass(); 209 var c3 =b_tel(); 210 var c4 =b_idCard(); 211 var c5 =b_email(); 212 if(c1&&c2&&c3&&c4&&c5){ 213 return true; 214 }else{ 215 return false; 216 } 217 } 218 </script> 219 </body> 220 </html>
效果 如下图所示：
【结语】
三人行，必有我师焉。