正则表达式初运用之认证界面的实现代码

时间：2021-05-02

先给大家展示下效果图：

关键代码如下所示：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> <form action="" name="form1"> <table> <tr> <td>用户名</td> <td><input type="text" name="input1" onblur="check1()"/></td><td><div id="div1" style="color:red"></div></td> </tr> <tr> <td>密码</td> <td><input type="password" name="input2" onblur="check2()"/></td><td><div id="div2" style="color:red"></div></td> </tr> <tr> <td>再次输入密码</td> <td><input type="password" name="input3" onblur="check3()"/></td><td><div id="div3" style="color:red"></div></td> </tr> <tr> <td>请输入邮政编码</td> <td><input type="text" name="input4" onblur="check4()"/></td><td><div id="div4" style="color:red"></div></td> </tr> <tr> <td>输入手机号码</td> <td><input type="text" name="input5" onblur="check5()"/></td><td><div id="div5" style="color:red"></div></div></td> </tr> <tr> <td> 邮箱地址</td> <td><input type="text" name="input6" onblur="check6()"/></td><td><div id="div6" style="color:red"></div></td> </tr> <tr> <td>生日</td><td><input type="text" name="input7" onclick="check7()"/></td><td><div id="div7" style="color:red"></div></td> </tr> <tr><td><input type="submit" value="完成注册" onclick="sub()"></td></tr> </table> </form> <script type="text/javascript"> var p = false; function check1() { var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/; var div1=document.getElementById("div1"); if(!reg.test(document.form1.input1.value)){ div1.innerHTML="用户名必须是4-16字母或数字组成且以字母开始"; }else{ div1.innerHTML="√"; return true; } } function check2() { var reg=/[a-zA-Z0-9]{4,10}/; var div2=document.getElementById("div2"); if(!reg.test(document.form1.input2.value)){ div2.innerHTML="密码只能由英文字母和数字组成，长度为4-10个字符"; }else{ div2.innerHTML="√"; return true; } } function check3() { var div3=document.getElementById("div3"); if(document.form1.input3.value==0){ div3.innerHTML="请再次输入密码"; }else if(document.form1.input3.value!=document.form1.input2.value){ div3.innerHTML="密码不一致"; }else { div3.innerHTML="√"; return true; } } function check4() { var reg=/^\d{6}$/; var div4=document.getElementById("div4"); if(!reg.test(document.form1.input4.value)){ div4.innerHTML="邮政编码必须是6个数字"; } else{ div4.innerHTML="√"; return true; } } function check5() { var reg=/^1\d{10}$/; var div5=document.getElementById("div5"); if(!reg.test(document.form1.input5.value)){ div5.innerHTML="手机号必须是11个数字且1开始"; }else{ div5.innerHTML="√"; return true; } } function check6() { var reg=/^[a-zA-Z][a-zA-Z0-9_]+@([a-zA-Z0-9]+.)+(com|cn)$/; var div6=document.getElementById("div6"); if(!reg.test(document.form1.input6.value)){ div6.innerHTML="邮箱地址不是这种格式"; }else{ div6.innerHTML="√"; return true; } } function check7() { var reg=/^(\d{4})-(\d{1,2})-(\d{1,2})$/; var div7=document.getElementById("div7"); var arr=reg.exec(document.form1.input7.value); if(arr==null){ div7.innerHTML="生日格式为1980-05-12或1988-05-04的形式"; }else if (arr[1]<1900||arr[1]>2016) { div7.innerHTML="生日必须在1900-2014"; }else if (arr[2]<1||arr[2]>12) { div7.innerHTML="生日的月份在01~12之间"; }else if (arr[3]<1||arr[3]>31) { div7.innerHTML="生日的日期必须在01-31之间"; }else { div7.innerHTML="√"; p = true; } } function sub(){ if(check1()==true&&p==true&& check2()==true&&check3()==true&&check4()==true&&check5()==true&&check6()==true){ alert("注册成功"); }else{ alert("注册失败，你还有信息没填或不符合格式"); } } </script> </body> </html>

以上所述是小编给大家介绍的正则表达式初运用之认证界面的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！

原文链接：http://www.cnblogs.com/Yirson/archive/2016/09/25/5907089.html

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章