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>
原标题：正则验证常用表单方法
关键词：正则
我知道了 