首頁 > 開發者 > JavaScript
本文執行個體講解了javascript實現表單驗證的詳細代碼，分享給大家供大家參考，具體內容如下
效果圖：
具體代碼：
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <script type="text/javascript"> function check() { //真實姓名(不可為空，其它沒有要求) var name = document.getElementById("name").value; if(name==""||name==null) { alert("不可為空!"); return false; } //登入名稱(登入名稱不可為空，長度在5-8之間，可以包含中文字元（）)一個漢字算一個字元 var loginName = document.getElementById("loginName").value; if(loginName==""||loginName==null) { alert("登入名稱不可為空"); return false; } //\u4e00-\u9fa5 驗證中文字元 var reg=/^[A-Za-z0-8\u4e00-\u9fa5]{5,8}$/; var result = reg.test(loginName); if(!result) { alert("登入名稱長度在5-8之間!"); return false; } //密碼(不可為空，長度6-12字元或數字，不能包含中文字元) var pwd = document.getElementById("pwd").value; if(pwd==""||pwd==null) { alert("密碼不可為空!"); return false; } var regpwd = /^[A-Za-z0-9]{6,12}$/; if(!regpwd.test(pwd)) { alert("密碼長度在6-12之間"); return false; } //確認密碼(不可為空，長度6-12字元或數字，不能包含中文字元，與密碼一致) var repwd = document.getElementById("repwd").value; if(repwd==""||repwd==null) { alert("確認密碼不可為空!"); return false; } if(repwd!=pwd) { alert("確認密碼與密碼不一致"); return false; } //身份證(15或18位) var idcard = document.getElementById("idcard").value; if(idcard==""||idcard==null) { alert("身份證不能空!"); return false; } if((idcard.length!=15)&&(idcard.length!=18)) { alert("身份證必選為15或18位"); return false; } if(idcard.length==15) { var regIDCard=/^\d{15}$/; if(!regIDCard.test(idcard)) { alert("身份證輸入錯誤"); return false; } } if(idcard.length==18) { var regIDCard =/^\d{18}|\d{17}[x|X]{1}$/; if(!regIDCard.test(idcard)) { alert("身份證輸入錯誤"); return false; } } } </script> <body> <h3>javascript驗證</h3> <table width="854" border="1"> <tr> <td width="633">真實姓名(不可為空，其它沒有要求)</td> <td width="205"><input id="name" name="name" type="text"/></td> </tr> <tr> <td>登入名稱(登入名稱不可為空，長度在5-8之間，可以包含中文字元（）)一個漢字算一個字元</td> <td><input id="loginName" name="loginName" type="text"/></td> </tr> <tr> <td>密碼(不可為空，長度6-12字元或數字，不能包含中文字元)</td> <td><input id="pwd" name="pwd" type="password"/></td> </tr> <tr> <td>確認密碼(不可為空，長度6-12字元或數字，不能包含中文字元，與密碼一致)</td> <td><input id="repwd" name="repwd" type="password"/></td> </tr> <tr> <td>性別(必選其一)</td> <td><input id="sex" name="sex" type="radio" value="男" checked="checked"/>男 <input id="sex" name="sex" type="radio" value="女" />女 </td> </tr> <tr> <td>身份證(15或18位)</td> <td><input type="text" id="idcard" name="idcard"/></td> </tr> <tr> <td colspan="2" align="center"><input type="button" id="check" value="提交" onclick="check()"/></td> </tr> </table> </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
