標籤：action log hone 文檔 提示 有線電話 手機 重設 規則
1、關於JavaScript表單驗證，如果使用雙向繫結的前端js架構，會更容易的多。但是博主還是建議大家不要脫離源生js本身。因為源生js才是王道。
注意：
a、代碼中的錯誤提示可能會沒有，在代碼中找到 “錯誤.jpg” 圖片，自己製作一個
b、驗證的判斷已經完成，只需要根據自己的驗證規則進行表單驗證，更換自己的Regex。
c、博主將錯誤提示圖片插入本文檔中。需要更名為 “錯誤.jpg”,放到與html根目錄下方可使用。
（錯誤提示圖片）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table border="1"> <form action="正則驗證手機號.html" name="form1" method="post" onsubmit="return test()"> <tr> <td align="right">使用者名稱：</td> <td><input type="text" name="username"></td> <td><span id="namemsg">*</span></td> </tr> <tr> <td align="right">密碼：</td> <td><input type="password" name="pwd"></td> <td><span id="pwdmsg">*</span></td> </tr> <tr> <td align="right">確認密碼：</td> <td><input type="password" name="pwd1"></td> <td><span id="pwd1msg">*</span></td> </tr> <tr> <td align="right">手機號：</td> <td><input type="text" name="phone"></td> <td><span id="iphone1">*</span></td> </tr> <tr> <td align="right">有線電話號：</td> <td><input type="text" name="phone1"></td> <td><span id="iphone2">*</span></td> </tr> <tr> <td align="right">社會安全號碼：</td> <td><input type="text" name="sfzid"></td> <td><span id="sfzmsg">*</span></td> </tr> <tr> <td colspan="3"> <input type="submit" name="sub" value="註冊"> <input type="reset" name="ret" value="重設" onclick="test1()"> </td> </tr> </form> </table> <script type="text/javascript"> //使用者名稱驗證 document.form1.username.onkeyup=function(){ var reg=/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/; if(reg.test(this.value)&&this.value.length>=6&&this.value.length<=30){ document.getElementById("namemsg").innerHTML="輸入正確"; }else{ document.getElementById("namemsg").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; } } //密碼驗證 document.form1.pwd.onkeyup=function(){ var reg1=/[A-Za-z]+[0-9]+/; if(reg1.test(this.value)&&this.value.length>=6&&this.value.length<=8){ document.getElementById("pwdmsg").innerHTML="輸入正確"; }else{ document.getElementById("pwdmsg").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; } } //確認密碼 document.form1.pwd1.onkeyup=function(){ if(this.value==document.form1.pwd.value&&this.value!=""){ document.getElementById("pwd1msg").innerHTML="輸入正確"; }else{ document.getElementById("pwd1msg").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; } } //手機號驗證 document.form1.phone.onkeyup=function(){ var reg2=/^(13|14|15|17|18)[0-9]{9}/; if(reg2.test(this.value)&&this.value.length==11){ document.getElementById("iphone1").innerHTML="輸入正確"; }else{ document.getElementById("iphone1").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; } } //有線電話號驗證 document.form1.phone1.onkeyup=function(){ var reg3=/^[0-9]{3,4}(\-{1})[0-9]{7,8}/; if(reg3.test(this.value)&&this.value.length==13||this.value.length==12){ document.getElementById("iphone2").innerHTML="輸入正確"; }else{ document.getElementById("iphone2").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; } } //社會安全號碼驗證 document.form1.sfzid.onkeyup=function(){ var reg4=/^\d{17}[(0-9)|X|x ]{1}/; if(reg4.test(this.value)&&this.value.length==18){ document.getElementById("sfzmsg").innerHTML="輸入正確"; }else{ document.getElementById("sfzmsg").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; } } //註冊按鈕方法 function test(){ var str="輸入正確" if(document.getElementById("namemsg").innerHTML!==str){ document.getElementById("namemsg").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.username.focus(); document.form1.username.value=""; return false; } if(document.getElementById("pwdmsg").innerHTML!==str){ document.getElementById("pwdmsg").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.pwd.focus(); document.form1.pwd.value=""; return false; } if(document.getElementById("pwd1msg").innerHTML!==str){ document.getElementById("pwd1msg").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.pwd1.focus(); document.form1.pwd1.value=""; return false; } if(document.getElementById("iphone1").innerHTML!==str){ document.getElementById("iphone1").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.phone.focus(); document.form1.phone.value=""; return false; } if(document.getElementById("iphone2").innerHTML!==str){ document.getElementById("iphone2").innerHTML="<img src=‘錯誤.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.phone1.focus(); document.form1.phone.value=""; return false; } } </script></body></html>
JavaScript 正則表單驗證（使用者名稱、密碼、確認密碼、手機號、有線電話號、社會安全號碼）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
