JavaScript實(shí)現(xiàn)表單驗(yàn)證案例
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)表單驗(yàn)證的具體代碼,供大家參考,具體內(nèi)容如下
需求
有如下注冊(cè)頁(yè)面,對(duì)表單進(jìn)行校驗(yàn),如果輸入的用戶名、密碼、手機(jī)號(hào)符合規(guī)則,則允許提交;如果不符合規(guī)則,則不允許提交。
完成以下需求:
1、當(dāng)輸入框失去焦點(diǎn)時(shí),驗(yàn)證輸入內(nèi)容是否符合要求
2、當(dāng)點(diǎn)擊注冊(cè)按鈕時(shí),判斷所有輸入框的內(nèi)容是否都符合要求,如果不合符則阻止表單提交
環(huán)境準(zhǔn)備
下面是初始頁(yè)面
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <title>歡迎注冊(cè)</title> ? ? <link href="../css/register.css" rel="stylesheet"> </head> <body> ? ? <div class="form-div"> ? ? ? ? <div class="reg-content"> ? ? ? ? ? ? <h1>歡迎注冊(cè)</h1> ? ? ? ? ? ? <span>已有帳號(hào)?</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>手機(jī)號(hào)</td> ? ? ? ? ? ? ? ? ? ? <td class="inputs"><input name="tel" type="text" id="tel"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span id="tel_err" class="err_msg" style="display: none">手機(jī)號(hào)格式有誤</span> ? ? ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? </table> ? ? ? ? ? ? <div class="buttons"> ? ? ? ? ? ? ? ? <input value="注 冊(cè)" type="submit" id="reg_btn"> ? ? ? ? ? ? </div> ? ? ? ? ? ? <br class="clear"> ? ? ? ? </form> ? ? </div> ? ? <script> ? ? </script> </body> </html>
驗(yàn)證輸入框
此小節(jié)完成如下功能:
校驗(yàn)用戶名。當(dāng)用戶名輸入框失去焦點(diǎn)時(shí),判斷輸入的內(nèi)容是否符合 長(zhǎng)度是 6-12 位
規(guī)則,不符合使id='username_err'
的span標(biāo)簽顯示出來(lái),給出用戶提示。
校驗(yàn)密碼。當(dāng)密碼輸入框失去焦點(diǎn)時(shí),判斷輸入的內(nèi)容是否符合 長(zhǎng)度是 6-12 位
規(guī)則,不符合使 id='password_err'
的span標(biāo)簽顯示出來(lái),給出用戶提示。
校驗(yàn)手機(jī)號(hào)。當(dāng)手機(jī)號(hào)輸入框失去焦點(diǎn)時(shí),判斷輸入的內(nèi)容是否符合 長(zhǎng)度是 11 位
規(guī)則,不符合使 id='tel_err'
的span標(biāo)簽顯示出來(lái),給出用戶提示。
代碼如下:
//1. 驗(yàn)證用戶名是否符合規(guī)則 //1.1 獲取用戶名的輸入框 var usernameInput = document.getElementById("username"); //1.2 綁定onblur事件 失去焦點(diǎn) usernameInput.onblur = function () { ? ? //1.3 獲取用戶輸入的用戶名 ? ? var username = usernameInput.value.trim(); ? ? //1.4 判斷用戶名是否符合規(guī)則:長(zhǎng)度 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. 驗(yàn)證密碼是否符合規(guī)則 //1.1 獲取密碼的輸入框 var passwordInput = document.getElementById("password"); //1.2 綁定onblur事件 失去焦點(diǎn) passwordInput.onblur = function() { ? ? //1.3 獲取用戶輸入的密碼 ? ? var password = passwordInput.value.trim(); ? ? //1.4 判斷密碼是否符合規(guī)則:長(zhǎng)度 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. 驗(yàn)證手機(jī)號(hào)是否符合規(guī)則 //1.1 獲取手機(jī)號(hào)的輸入框 var telInput = document.getElementById("tel"); //1.2 綁定onblur事件 失去焦點(diǎn) telInput.onblur = function() { ? ? //1.3 獲取用戶輸入的手機(jī)號(hào) ? ? var tel = telInput.value.trim(); ? ? //1.4 判斷手機(jī)號(hào)是否符合規(guī)則:長(zhǎng)度 11 ? ? if (tel.length == 11) { ? ? ? ? //符合規(guī)則 ? ? ? ? document.getElementById("tel_err").style.display = 'none'; ? ? } else { ? ? ? ? //不合符規(guī)則 ? ? ? ? document.getElementById("tel_err").style.display = ''; ? ? } }
驗(yàn)證表單
當(dāng)用戶點(diǎn)擊 注冊(cè)
按鈕時(shí),需要同時(shí)對(duì)輸入的 用戶名
、密碼
、手機(jī)號(hào)
,如果都符合規(guī)則,則提交表單;如果有一個(gè)不符合規(guī)則,則不允許提交表單。實(shí)現(xiàn)該功能需要獲取表單元素對(duì)象,并綁定 onsubmit
事件
//1. 獲取表單對(duì)象 var regForm = document.getElementById("reg-form"); //2. 綁定onsubmit 事件 regForm.onsubmit = function () { ? ?? }
onsubmit
事件綁定的函數(shù)需要對(duì)輸入的 用戶名
、密碼
、手機(jī)號(hào)
進(jìn)行校驗(yàn),這些校驗(yàn)我們之前都已經(jīng)實(shí)現(xiàn)過(guò)了,這里我們還需要再校驗(yàn)一次嗎?不需要,只需要對(duì)之前校驗(yàn)的代碼進(jìn)行改造,把每個(gè)校驗(yàn)的代碼專(zhuān)門(mén)抽象到有名字的函數(shù)中,方便調(diào)用;并且每個(gè)函數(shù)都要返回結(jié)果來(lái)去決定是提交表單還是阻止表單提交,代碼如下:
//1. 驗(yàn)證用戶名是否符合規(guī)則 //1.1 獲取用戶名的輸入框 var usernameInput = document.getElementById("username"); //1.2 綁定onblur事件 失去焦點(diǎn) usernameInput.onblur = checkUsername; function checkUsername() { ? ? //1.3 獲取用戶輸入的用戶名 ? ? var username = usernameInput.value.trim(); ? ? //1.4 判斷用戶名是否符合規(guī)則:長(zhǎng)度 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. 驗(yàn)證密碼是否符合規(guī)則 //1.1 獲取密碼的輸入框 var passwordInput = document.getElementById("password"); //1.2 綁定onblur事件 失去焦點(diǎn) passwordInput.onblur = checkPassword; function checkPassword() { ? ? //1.3 獲取用戶輸入的密碼 ? ? var password = passwordInput.value.trim(); ? ? //1.4 判斷密碼是否符合規(guī)則:長(zhǎng)度 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. 驗(yàn)證手機(jī)號(hào)是否符合規(guī)則 //1.1 獲取手機(jī)號(hào)的輸入框 var telInput = document.getElementById("tel"); //1.2 綁定onblur事件 失去焦點(diǎn) telInput.onblur = checkTel; function checkTel() { ? ? //1.3 獲取用戶輸入的手機(jī)號(hào) ? ? var tel = telInput.value.trim(); ? ? //1.4 判斷手機(jī)號(hào)是否符合規(guī)則:長(zhǎng)度 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
綁定的函數(shù)需要調(diào)用 checkUsername()
函數(shù)、checkPassword()
函數(shù)、checkTel()
函數(shù)。
//1. 獲取表單對(duì)象 var regForm = document.getElementById("reg-form"); //2. 綁定onsubmit 事件 regForm.onsubmit = function () { ? ? //挨個(gè)判斷每一個(gè)表單項(xiàng)是否都符合要求,如果有一個(gè)不合符,則返回false ? ? var flag = checkUsername() && checkPassword() && checkTel(); ? ? return flag; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)點(diǎn)擊循環(huán)切換顯示內(nèi)容的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊循環(huán)切換顯示內(nèi)容的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁(yè)面元素的獲取、屬性設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10JavaScript實(shí)現(xiàn)多層顏色選項(xiàng)卡嵌套
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)多層顏色選項(xiàng)卡嵌套,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09Javascript中判斷變量是數(shù)組還是對(duì)象(array還是object)
怎樣判斷一個(gè)JavaScript變量是array還是obiect,或許有很多初學(xué)者對(duì)此不是很清楚吧,下面為大家詳細(xì)解答下,希望對(duì)大家有所幫助2013-08-08JS常見(jiàn)DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
這篇文章主要介紹了JS常見(jiàn)DOM節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了JavaScript針對(duì)DOM節(jié)點(diǎn)的創(chuàng)建 ,插入,刪除,復(fù)制,查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-05-05bootstrap中使用google prettify讓代碼高亮的方法
使用google prettify 讓代碼高亮非常漂亮,接下來(lái)通過(guò)本文給大家介紹bootstrap中使用google prettify讓代碼高亮的方法,感興趣的朋友一起看看吧2016-10-10JS區(qū)分Object與Aarry的六種方法總結(jié)
下面小編就為大家?guī)?lái)一篇JS區(qū)分Object與Aarry的六種方法總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02