1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正则验证常用表单方法</title> 6 <script type="text/javascript"> 7 function focus_username() { 8 var resultObj1=document.getElementById('result_username'); 9 resultObj1.innerHTML="以字母开头的5-12位的字符"; 10 resultObj1.style.color="blue"; 11 document.form1.username.style="border:1px solid red"; 12 } 13 14 // function blur_username () { 15 //第一种方法： 16 // var resultObj1=document.getElementById('result_username') 17 // if (document.form1.username.value=='') { 18 // resultObj1.innerHTML="用户名不能为空"; 19 // resultObj1.style.color="red"; 20 // return false; 21 // }else if (document.form1.username.value.length<5||document.form1.username.value.length>12) { 22 // resultObj1.innerHTML="用户名字符长度必须介于5到12个之间"; 23 // resultObj1.style.color="red"; 24 // return false; 25 // }else{ 26 // resultObj1.innerHTML="ok"; 27 // resultObj1.style.color="green"; 28 // } 29 // } 30 31 function blur_username () { 32 //第二种方法： 33 var resultObj1=document.getElementById('result_username') 34 var pre1=document.form1.username.value; 35 var reg1=/^[a-zA-Z]\w{5,12}$/; 36 37 if (pre1=='') { 38 resultObj1.innerHTML="(必填项)用户名不能为空"; 39 resultObj1.style.color="red"; 40 return false; 41 }else if (!reg1.test(pre1)) { 42 resultObj1.innerHTML="用户名字符输入不合法"; 43 resultObj1.style.color="red"; 44 return false; 45 }else{ 46 resultObj1.innerHTML="ok"; 47 resultObj1.style.color="green"; 48 return true; 49 } 50 } 51 52 53 54 function focus_userpwd1() { 55 var resultObj2=document.getElementById('result_userpwd1'); 56 resultObj2.innerHTML="(必填项)介于5-12位的非特殊字符"; 57 resultObj2.style.color="blue"; 58 document.form1.userpwd1.style="border:1px solid red"; 59 } 60 61 // function blur_userpwd1 () { 62 63 // var resultObj2=document.getElementById('result_userpwd1') 64 // if (document.form1.userpwd1.value=='') { 65 // resultObj2.innerHTML="用户名密码不能为空"; 66 // resultObj2.style.color="red"; 67 // return false; 68 // }else if (document.form1.userpwd1.value.length<5||document.form1.userpwd1.value.length>12) { 69 // resultObj2.innerHTML="用户名密码字符长度必须介于5到12个之间"; 70 // resultObj2.style.color="red"; 71 // return false; 72 // }else{ 73 // resultObj2.innerHTML="ok"; 74 // resultObj2.style.color="green"; 75 // return true; 76 // } 77 // } 78 79 function blur_userpwd1 () { 80 var resultObj2=document.getElementById('result_userpwd1') 81 var pre2=document.form1.userpwd1.value; 82 var reg2=/^\w{5,12}$/; 83 if (pre2=='') { 84 resultObj2.innerHTML="(必填项)用户名密码不能为空"; 85 resultObj2.style.color="red"; 86 return false; 87 }else if (!reg2.test(pre2)) { 88 resultObj2.innerHTML="用户名密码字符输入不合法"; 89 resultObj2.style.color="red"; 90 return false; 91 }else{ 92 resultObj2.innerHTML="ok"; 93 resultObj2.style.color="green"; 94 return true; 95 } 96 } 97 98 99 function focus_userpwd2() { 100 var resultObj3=document.getElementById('result_userpwd2'); 101 resultObj3.innerHTML="(必填项)介于5-12位的非特殊字符"; 102 resultObj3.style.color="blue"; 103 document.form1.userpwd2.style="border:1px solid red"; 104 } 105 106 // function blur_userpwd2 () { 107 108 // var resultObj3=document.getElementById('result_userpwd2') 109 // if (document.form1.userpwd2.value=='') { 110 // resultObj3.innerHTML="用户名密码不能为空"; 111 // resultObj3.style.color="red"; 112 // return false; 113 // }else if (document.form1.userpwd1.value!=document.form1.userpwd2.value) { 114 // resultObj3.innerHTML="两次用户名密码输入不一致"; 115 // resultObj3.style.color="red"; 116 // return false; 117 // }else{ 118 // resultObj3.innerHTML="ok"; 119 // resultObj3.style.color="green"; 120 // return true; 121 // } 122 // } 123 124 function blur_userpwd2 () { 125 126 var resultObj3=document.getElementById('result_userpwd2') 127 var pre3=document.form1.userpwd2.value; 128 var reg3=/^\w{5,12}$/; 129 if (pre3=='') { 130 resultObj3.innerHTML="(必填项)用户名密码不能为空"; 131 resultObj3.style.color="red"; 132 return false; 133 }else if (!reg3.test(pre3)) { 134 resultObj3.innerHTML="用户名密码字符输入不合法"; 135 resultObj3.style.color="red"; 136 return false; 137 }else if(document.form1.userpwd2.value!=document.form1.userpwd1.value){ 138 resultObj3.innerHTML="两次用户名密码输入不一致"; 139 resultObj3.style.color="red"; 140 return false; 141 142 }else {resultObj3.innerHTML="ok"; 143 resultObj3.style.color="green"; 144 return true; 145 } 146 } 147 148 149 function focus_Mobile() { 150 var resultObj4=document.getElementById('result_Mobile'); 151 resultObj4.innerHTML="请输入你11位数的手机号码"; 152 resultObj4.style.color="blue"; 153 document.form1.Mobile.style="border:1px solid red"; 154 } 155 156 function blur_Mobile() { 157 var resultObj4=document.getElementById('result_Mobile') 158 var pre4=document.form1.Mobile.value; 159 var reg4=/^1[3|5|8][0-9]{9}$/; 160 if (pre4=='') { 161 resultObj4.innerHTML="手机号码不能为空"; 162 resultObj4.style.color="red"; 163 }else if (!reg4.test(pre4)) { 164 resultObj4.innerHTML="手机号码字符输入不合法"; 165 resultObj4.style.color="red"; 166 }else { 167 resultObj4.innerHTML="ok"; 168 resultObj4.style.color="green"; 169 } 170 } 171 172 173 function focus_Tel() { 174 var resultObj5=document.getElementById('result_Tel'); 175 resultObj5.innerHTML="请输入你的座机号码"; 176 resultObj5.style.color="blue"; 177 document.form1.Tel.style="border:1px solid red"; 178 } 179 180 function blur_Tel() { 181 var resultObj5=document.getElementById('result_Tel') 182 var pre5=document.form1.Tel.value; 183 var reg5=/^0{1}[0-9]{2,3}\-[8]?[0-9]{7}$/; 184 if (pre5=='') { 185 resultObj5.innerHTML="座机号码不能为空"; 186 resultObj5.style.color="red"; 187 188 }else if (!reg5.test(pre5)) { 189 resultObj5.innerHTML="座机号码字符输入不合法"; 190 resultObj5.style.color="red"; 191 192 }else { 193 resultObj5.innerHTML="ok"; 194 resultObj5.style.color="green"; 195 } 196 } 197 198 199 function focus_mail() { 200 var resultObj6=document.getElementById('result_mail'); 201 resultObj6.innerHTML="请输入你的邮箱号码"; 202 resultObj6.style.color="blue"; 203 document.form1.mail.style="border:1px solid red"; 204 } 205 206 function blur_mail() { 207 var resultObj6=document.getElementById('result_mail'); 208 var pre6=document.form1.mail.value; 209 var reg6=/^[a-zA-Z1-9][a-zA-Z0-9\._]+@[a-z0-9]+\.(com)(\.(cn))?$/; 210 if (pre6=='') { 211 resultObj6.innerHTML="邮箱号码不能为空"; 212 resultObj6.style.color="red"; 213 214 }else if (!reg6.test(pre6)) { 215 resultObj6.innerHTML="邮箱号码字符输入不合法"; 216 resultObj6.style.color="red"; 217 218 }else { 219 resultObj6.innerHTML="ok"; 220 resultObj6.style.color="green"; 221 } 222 } 223 224 225 function focus_ID() { 226 var resultObj7=document.getElementById('result_ID'); 227 resultObj7.innerHTML="(必填项)请输入你18位的二代身份证号码"; 228 resultObj7.style.color="blue"; 229 document.form1.ID.style="border:1px solid red"; 230 } 231 232 function blur_ID() { 233 var resultObj7=document.getElementById('result_ID'); 234 var pre7=document.form1.ID.value; 235 var reg7=/^[0-9]{17}[0-9x]$/; 236 if (pre7=='') { 237 resultObj7.innerHTML="(必填项)二代身份证号码字符不能为空"; 238 resultObj7.style.color="red"; 239 return false; 240 }else if (!reg7.test(pre7)) { 241 resultObj7.innerHTML="二代身份证号码字符输入不合法"; 242 resultObj7.style.color="red"; 243 return false; 244 }else { 245 resultObj7.innerHTML="ok"; 246 resultObj7.style.color="green"; 247 return true; 248 } 249 } 250 251 252 function checkForm(){ 253 var flag_username=blur_username(); 254 var flag_userpwd1=blur_userpwd1(); 255 var flag_userpwd2=blur_userpwd2(); 256 var flag_ID=blur_ID(); 257 if (flag_username==true&&flag_userpwd1==true&&flag_userpwd2==true&&flag_ID==true) { 258 return true; 259 }else{ 260 return false; 261 } 262 } 263 264 </script> 265 266 <style type="text/css"> 267 body{background-image: url(images/4.jpg);background-size: cover;} 268 table{margin-left: 500px;margin-top: 100px;background-image: url(images/3.jpg);background-size: cover;box-shadow: 5px 5px 8px #662C18} 269 .vip{font-size: 25px;} 270 </style> 271 272 </head> 273 <body> 274 <form name="form1" action="1.php" method="post" onsubmit="return checkForm()"> 275 <table width="560px" border="0px" bordercolor="red" cellpadding="5px" cellspacing="0px" align="center" > 276 <tr> 277 <th colspan="3" class="vip">VIP会员注册</th> 278 </tr> 279 <tr> 280 <td width="100px" align="right" >用户名：</td> 281 <td width="150px"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" ></td> 282 <td><div width="300px" id="result_username"></div></td> 283 </tr> 284 <tr> 285 <td align="right">密码：</td> 286 <td><input type="password" name="userpwd1" onfocus="focus_userpwd1()" onblur="blur_userpwd1()" /></td> 287 <td><div id="result_userpwd1"></div></td> 288 </tr> 289 <tr> 290 <td align="right">确认密码：</td> 291 <td><input type="password" name="userpwd2" onfocus="focus_userpwd2()" onblur="blur_userpwd2()"/></td> 292 <td><div id="result_userpwd2"></div></td> 293 </tr> 294 <tr> 295 <td align="right">手机号码：</td> 296 <td><input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/></td> 297 <td><div id="result_Mobile"></div></td> 298 </tr> 299 <tr> 300 <td align="right">座机号码：</td> 301 <td><input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/></td> 302 <td><div id="result_Tel"></div></td> 303 </tr> 304 <tr> 305 <td align="right">邮箱号码：</td> 306 <td><input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/></td> 307 <td><div id="result_mail"></div></td> 308 </tr> 309 <tr> 310 <td align="right">二代身份证：</td> 311 <td><input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/></td> 312 <td><div id="result_ID"></div></td> 313 </tr> 314 <tr> 315 <td align="center" colspan="2"><input type="submit" value="提交注册" /> 316 <input type="reset" value="重置资料" /></td> 317 <td></td> 318 </tr> 319 </table> 320 </form> 321 </body> 322 </html>
