JavaScript實現表單驗證案例
本文實例為大家分享了JavaScript實現表單驗證的具體代碼,供大家參考,具體內容如下
需求
有如下注冊頁面,對表單進行校驗,如果輸入的用戶名、密碼、手機號符合規(guī)則,則允許提交;如果不符合規(guī)則,則不允許提交。
完成以下需求:
1、當輸入框失去焦點時,驗證輸入內容是否符合要求
2、當點擊注冊按鈕時,判斷所有輸入框的內容是否都符合要求,如果不合符則阻止表單提交
環(huán)境準備
下面是初始頁面
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <title>歡迎注冊</title> ? ? <link href="../css/register.css" rel="stylesheet"> </head> <body> ? ? <div class="form-div"> ? ? ? ? <div class="reg-content"> ? ? ? ? ? ? <h1>歡迎注冊</h1> ? ? ? ? ? ? <span>已有帳號?</span> <a href="#" >登錄</a> ? ? ? ? </div> ? ? ? ? <form id="reg-form" action="#" method="get"> ? ? ? ? ? ? <table> ? ? ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? ? ? <td>用戶名</td> ? ? ? ? ? ? ? ? ? ? <td class="inputs"> ? ? ? ? ? ? ? ? ? ? ? ? <input name="username" type="text" id="username"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span id="username_err" class="err_msg" style="display: none">用戶名不太受歡迎</span> ? ? ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? ? ? <td>密碼</td> ? ? ? ? ? ? ? ? ? ? <td class="inputs"> ? ? ? ? ? ? ? ? ? ? ? ? <input name="password" type="password" id="password"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span id="password_err" class="err_msg" style="display: none">密碼格式有誤</span> ? ? ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? ? ? <td>手機號</td> ? ? ? ? ? ? ? ? ? ? <td class="inputs"><input name="tel" type="text" id="tel"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span id="tel_err" class="err_msg" style="display: none">手機號格式有誤</span> ? ? ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? </table> ? ? ? ? ? ? <div class="buttons"> ? ? ? ? ? ? ? ? <input value="注 冊" type="submit" id="reg_btn"> ? ? ? ? ? ? </div> ? ? ? ? ? ? <br class="clear"> ? ? ? ? </form> ? ? </div> ? ? <script> ? ? </script> </body> </html>
驗證輸入框
此小節(jié)完成如下功能:
校驗用戶名。當用戶名輸入框失去焦點時,判斷輸入的內容是否符合 長度是 6-12 位
規(guī)則,不符合使id='username_err'
的span標簽顯示出來,給出用戶提示。
校驗密碼。當密碼輸入框失去焦點時,判斷輸入的內容是否符合 長度是 6-12 位
規(guī)則,不符合使 id='password_err'
的span標簽顯示出來,給出用戶提示。
校驗手機號。當手機號輸入框失去焦點時,判斷輸入的內容是否符合 長度是 11 位
規(guī)則,不符合使 id='tel_err'
的span標簽顯示出來,給出用戶提示。
代碼如下:
//1. 驗證用戶名是否符合規(guī)則 //1.1 獲取用戶名的輸入框 var usernameInput = document.getElementById("username"); //1.2 綁定onblur事件 失去焦點 usernameInput.onblur = function () { ? ? //1.3 獲取用戶輸入的用戶名 ? ? var username = usernameInput.value.trim(); ? ? //1.4 判斷用戶名是否符合規(guī)則:長度 6~12 ? ? if (username.length >= 6 && username.length <= 12) { ? ? ? ? //符合規(guī)則 ? ? ? ? document.getElementById("username_err").style.display = 'none'; ? ? } else { ? ? ? ? //不合符規(guī)則 ? ? ? ? document.getElementById("username_err").style.display = ''; ? ? } } //1. 驗證密碼是否符合規(guī)則 //1.1 獲取密碼的輸入框 var passwordInput = document.getElementById("password"); //1.2 綁定onblur事件 失去焦點 passwordInput.onblur = function() { ? ? //1.3 獲取用戶輸入的密碼 ? ? var password = passwordInput.value.trim(); ? ? //1.4 判斷密碼是否符合規(guī)則:長度 6~12 ? ? if (password.length >= 6 && password.length <= 12) { ? ? ? ? //符合規(guī)則 ? ? ? ? document.getElementById("password_err").style.display = 'none'; ? ? } else { ? ? ? ? //不合符規(guī)則 ? ? ? ? document.getElementById("password_err").style.display = ''; ? ? } } //1. 驗證手機號是否符合規(guī)則 //1.1 獲取手機號的輸入框 var telInput = document.getElementById("tel"); //1.2 綁定onblur事件 失去焦點 telInput.onblur = function() { ? ? //1.3 獲取用戶輸入的手機號 ? ? var tel = telInput.value.trim(); ? ? //1.4 判斷手機號是否符合規(guī)則:長度 11 ? ? if (tel.length == 11) { ? ? ? ? //符合規(guī)則 ? ? ? ? document.getElementById("tel_err").style.display = 'none'; ? ? } else { ? ? ? ? //不合符規(guī)則 ? ? ? ? document.getElementById("tel_err").style.display = ''; ? ? } }
驗證表單
當用戶點擊 注冊
按鈕時,需要同時對輸入的 用戶名
、密碼
、手機號
,如果都符合規(guī)則,則提交表單;如果有一個不符合規(guī)則,則不允許提交表單。實現該功能需要獲取表單元素對象,并綁定 onsubmit
事件
//1. 獲取表單對象 var regForm = document.getElementById("reg-form"); //2. 綁定onsubmit 事件 regForm.onsubmit = function () { ? ?? }
onsubmit
事件綁定的函數需要對輸入的 用戶名
、密碼
、手機號
進行校驗,這些校驗我們之前都已經實現過了,這里我們還需要再校驗一次嗎?不需要,只需要對之前校驗的代碼進行改造,把每個校驗的代碼專門抽象到有名字的函數中,方便調用;并且每個函數都要返回結果來去決定是提交表單還是阻止表單提交,代碼如下:
//1. 驗證用戶名是否符合規(guī)則 //1.1 獲取用戶名的輸入框 var usernameInput = document.getElementById("username"); //1.2 綁定onblur事件 失去焦點 usernameInput.onblur = checkUsername; function checkUsername() { ? ? //1.3 獲取用戶輸入的用戶名 ? ? var username = usernameInput.value.trim(); ? ? //1.4 判斷用戶名是否符合規(guī)則:長度 6~12 ? ? var flag = username.length >= 6 && username.length <= 12; ? ? if (flag) { ? ? ? ? //符合規(guī)則 ? ? ? ? document.getElementById("username_err").style.display = 'none'; ? ? } else { ? ? ? ? //不合符規(guī)則 ? ? ? ? document.getElementById("username_err").style.display = ''; ? ? } ? ? return flag; } //1. 驗證密碼是否符合規(guī)則 //1.1 獲取密碼的輸入框 var passwordInput = document.getElementById("password"); //1.2 綁定onblur事件 失去焦點 passwordInput.onblur = checkPassword; function checkPassword() { ? ? //1.3 獲取用戶輸入的密碼 ? ? var password = passwordInput.value.trim(); ? ? //1.4 判斷密碼是否符合規(guī)則:長度 6~12 ? ? var flag = password.length >= 6 && password.length <= 12; ? ? if (flag) { ? ? ? ? //符合規(guī)則 ? ? ? ? document.getElementById("password_err").style.display = 'none'; ? ? } else { ? ? ? ? //不合符規(guī)則 ? ? ? ? document.getElementById("password_err").style.display = ''; ? ? } ? ? return flag; } //1. 驗證手機號是否符合規(guī)則 //1.1 獲取手機號的輸入框 var telInput = document.getElementById("tel"); //1.2 綁定onblur事件 失去焦點 telInput.onblur = checkTel; function checkTel() { ? ? //1.3 獲取用戶輸入的手機號 ? ? var tel = telInput.value.trim(); ? ? //1.4 判斷手機號是否符合規(guī)則:長度 11 ? ? var flag = tel.length == 11; ? ? if (flag) { ? ? ? ? //符合規(guī)則 ? ? ? ? document.getElementById("tel_err").style.display = 'none'; ? ? } else { ? ? ? ? //不合符規(guī)則 ? ? ? ? document.getElementById("tel_err").style.display = ''; ? ? } ? ? return flag; }
而 onsubmit
綁定的函數需要調用 checkUsername()
函數、checkPassword()
函數、checkTel()
函數。
//1. 獲取表單對象 var regForm = document.getElementById("reg-form"); //2. 綁定onsubmit 事件 regForm.onsubmit = function () { ? ? //挨個判斷每一個表單項是否都符合要求,如果有一個不合符,則返回false ? ? var flag = checkUsername() && checkPassword() && checkTel(); ? ? return flag; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Javascript中判斷變量是數組還是對象(array還是object)
怎樣判斷一個JavaScript變量是array還是obiect,或許有很多初學者對此不是很清楚吧,下面為大家詳細解答下,希望對大家有所幫助2013-08-08JS常見DOM節(jié)點操作示例【創(chuàng)建 ,插入,刪除,復制,查找】
這篇文章主要介紹了JS常見DOM節(jié)點操作,結合實例形式分析了JavaScript針對DOM節(jié)點的創(chuàng)建 ,插入,刪除,復制,查找等操作相關函數與使用技巧,需要的朋友可以參考下2018-05-05bootstrap中使用google prettify讓代碼高亮的方法
使用google prettify 讓代碼高亮非常漂亮,接下來通過本文給大家介紹bootstrap中使用google prettify讓代碼高亮的方法,感興趣的朋友一起看看吧2016-10-10