正则验证常用表单方法

发布时间：2015-11-09 12:00:20

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title> ...

 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.; 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.; 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.;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.;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.;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.;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.;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" >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>