javascript
JavaScript中的表单验证
文章目錄
- 1.什么是表單驗證
- 2.常見的表單驗證
1.什么是表單驗證
大多數網站的注冊頁面中，都會要求用戶輸入生日，我們知道日期的格式是yyyy-MM-dd并且由數字組成，中間不允許出現字母或是其他符號，如果填寫格式與日期格式不符合，name注冊將失敗，這種操作就是表單驗證的體現。
表單驗證就是js在數據被送往服務器前，對html表單中的數據進行驗證的過程，在驗證所有信息均符合要求之后，經表單提交到服務器由服務器進行數據處理。常見的表單驗證有：表單中的必填項目、輸入的郵件是否合法，輸入日期是否合法等。
2.常見的表單驗證
案例1：某網站的注冊頁面，要求所有項目必須填寫、密碼長度必須大于6位、兩次輸入密碼必須一致、年齡需要在15~100之間、郵件地址必須符合規則。
分析：
1.表單驗證是使用哪個html事件完成？是選用按鈕的onclick事件還是選用表單提交事假onsubmit事件？
onclick事件是控件的單擊事件，onsubmit事件是表單的提交事件，應該用onsubmit事件
2.如何利用js代碼獲取單選框（標簽名：rdnSex）中的性別？
單選框往往是以組的形式出現的，但是不能通過組名直接獲得選中的值，而需要通過循環遍歷數組中的所有元素，通過判斷把選中的元素提取出來。關鍵代碼如下：
3.如何利用js驗證表單中的郵件地址（標簽名：txtEmail）的正確性？
郵件地址有獨特的規則，郵件中需要有@和.出現，并且@必須在.之前出現。關、關鍵代碼如下：
4.采用什么辦法驗證年齡必須是數字？
js中的isNan方法專門用來判斷字符串是否為非數字，如果字符串是非數字則返回true，否則為false。
關鍵代碼如下：
5.如何驗證日期類型？
日期類型可以從格式上驗證，按照yyyy-MM-dd構成，具體規則如下：
1字符串必須是10位，年4位，月和日各兩位，如果月日不足兩位則前方補0。
2字符串的第4位和第7位必須是-符號
3利用字符串方法split()方法，將字符串截成數組，分別保存年月日，利用循環遍歷數組判斷數組中的字符串是否為數字。
關鍵代碼如下：
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>注冊頁面</title><script type="text/javascript">function check() {var name = document.form1.txtName.value;var pwd = document.form1.txtPwd.value;var rePwd = document.form1.txtRePwd.value;if (name === "" || pwd === "" || rePwd === ""){alert("用戶名密碼不能為空");return false;}if (pwd.length < 6){alert("密碼長度少于6位");return false;}else if(rePwd != pwd){alert("兩次輸入的密碼不一致");return false;}var birthday = document.form1.txtBirthday.value;if(birthday.length != 10){alert("日期格式長度必須是10！");return false;}else if(birthday.charAt(4) != "-" || birthday.charAt(7) != "-"){alert("日期的格式不對！");return false;}else{var date = birthday.split("-");for (var i = 0; i < date.length; i++){if (isNaN(date[i])){alert("日期需要用數字！");return false;}}}var email = document.form1.txtEmail.value;if (email === ""){alert("郵件地址不能為空!");return false;}var post1 = email.indexOf('@');var post2= email.indexOf('.');if (post1 == -1 || post2 == -1 || post2 < post1){alert("郵件地址格式錯誤！");return false;}var age = document.form1.txtAge.value;if(age === ""){alert("年齡不能為空~");return false;}else if(isNaN(age)){alert("年齡必須由數字組成！");return false;}else if (!parseInt(age) > 15 && parseInt(age) <= 100){alert("年齡必須在15~100之間！");return false;}var sex;for(var i = 0; i < document.form1.rdnSex.length; i++){if (document.form1.redSex[i].checked){sex = document.form1.redSex[i].value;}}}</script> </head> <body> <form onsubmit="return check();" name = "form1" method="post" action=""><table width="363" border="1" cellpadding="1"><tr><td>用戶名：</td><td><input type="text" name="txtName" id="txtName"></td></tr><tr><td>密碼：</td><td><input type="password" name="txtPwd" id="txtPwd"></td></tr><tr><td>新密碼：</td><td><input type="password" name="txtRePwd" id="txtRePwd"></td></tr><tr><td>生日：</td><td><input type="text" name="txtBirthday" id="txtBirthday"></td></tr><tr><td>性別：</td><td><input type="radio" name="rdnSex" id="radio"value="男">男<input type="radio" name="rdnSex" id="radio2"value="女">女</td></tr><tr><td>年齡：</td><td><input type="text" name="txtAge" id="txtAge"></td></tr><tr><td>郵箱地址：</td><td><input type="text" name="txtEmail" id="txtEmail"></td></tr><tr><td></td><td><input type="submit" name="btnSubmit" id = "btnSubmit" value="確定"></td></tr></table> </form> </body> </html>
總結
以上是生活随笔為你收集整理的JavaScript中的表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 洛谷 P2084 进制转换
- 下一篇： JavaScript权威指南(第5版)p