手把手教你使用JavaScript實(shí)現(xiàn)表單驗(yàn)證
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
一、前言
在Web項(xiàng)目開發(fā)中，經(jīng)常會(huì)看到表單驗(yàn)證的功能。例如，用戶注冊(cè)、用戶登錄等，需要對(duì)用戶填寫的內(nèi)容進(jìn)行驗(yàn)證。接下來，小編帶著大家一起來實(shí)現(xiàn)表單驗(yàn)證的用戶名、密碼、性別、手機(jī)號(hào)碼、郵箱驗(yàn)證的功能。
二、項(xiàng)目準(zhǔn)備
開發(fā)工具：HBuilderX
瀏覽器：Google Chrome瀏覽器
三、項(xiàng)目目標(biāo)
1.了解什么是正則表達(dá)式。
2.掌握正則表達(dá)式的語法。
3.學(xué)會(huì)應(yīng)用正則表達(dá)式。
四、項(xiàng)目實(shí)現(xiàn)
HTML
<div class="box"><div class="box-head"><h1>歡迎注冊(cè)</h1><p style="font-size: 15px;">已有賬號(hào)？<a href="#" style="color: #3366D4;">登錄</a></p></div><div class="box-body"><form id="register" ><table><tr><th>用戶名稱：</th><td><input type="text" id="user" name="user" placeholder="長度4-12位，英文大小寫字母"></td><td><div></div></td></tr><tr><th>密 碼：</th><td><input type="password" id="passWord" name="passWord" placeholder="長度6-20位，大小寫字母、數(shù)字或下劃線"></td><td><div></div></td></tr><tr><th>確認(rèn)密碼：</th><td><input type="password" id="repassWord" name="repassWord" placeholder="請(qǐng)?jiān)俅屋斎朊艽a進(jìn)行確認(rèn)"></td><td><div></div></td></tr><tr><th>性 別：</th><td><input type="radio" id="Male" name="sex" value="1"/><label for="Male">男</label><input type="radio" id="Female" name="sex" value="0"/><label for="Female">女</label></td><td><div></div></td></tr><tr><th>手機(jī)號(hào)碼：</th><td><input type="text" id="telephone" name="telephone" placeholder="13、14、15、17、18開頭的11位手機(jī)號(hào)"></td><td><div></div></td></tr><tr><th>電子郵箱：</th><td><input type="text" id="email" name="email" placeholder="用戶名@域名（域名后綴至少2個(gè)字符）"></td><td><div></div></td></tr></table><div style="display: flex;justify-content: center;"><button type="submit" id="btn_ok">注冊(cè)</button></div></form></div></div>
在上面代碼中，使用table標(biāo)簽元素表示定義一個(gè)HTML表格，tr表示表格中的行，td表示表格中的列。name表示獲取對(duì)應(yīng)文本的正則規(guī)則驗(yàn)證，placeholder屬性表示提示信息。
JavaScript
1.添加事件
// 獲取所有input框var inputs = document.getElementsByTagName('input');// 為每個(gè)input框添加失去焦點(diǎn)事件for (var i = 0; i < inputs.length; i++) {inputs[i].onblur = inputBlur;}
在上面代碼中，首先是獲取用戶注冊(cè)頁面所有的input元素，為每個(gè)input框添加失去焦點(diǎn)事件，利用for循環(huán)來添加事件處理函數(shù)inputBlur()。
2.寫inputBlur()事件處理函數(shù)，該函數(shù)主要用于獲取相應(yīng)input元素的驗(yàn)證規(guī)則和提示信息，用戶輸入的內(nèi)容進(jìn)行檢驗(yàn)，之后，把檢驗(yàn)的結(jié)果顯示在HTML頁面中，代碼如下所示：
function inputBlur() {// 獲取輸入框的name值、value值、框中的提示信息var name = this.name;var val = this.value;var display = this.placeholder;var display_obj = this.parentNode.parentNode.children[2].children[0]; //顯示提示信息//去掉兩端空格val = val.trim();//判斷內(nèi)容為空，顯示提示信息if (!val) {error(display_obj, '輸入框內(nèi)容不能為空');return false;}//獲取正則匹配規(guī)則和提示信息var reg_msg = getRegMsg(name, display);//檢測(cè)是否正則匹配if (reg_msg['reg'].test(val)) {// 匹配成功success(display_obj, reg_msg['msg']['success']);} else {// 匹配失敗error(display_obj, reg_msg['msg']['error']);}}
在上面代碼中，變量名name、val、tips分別是獲取input元素中的name、value、placeholder屬性的值。
變量名tips_obj用于當(dāng)input元素失去焦點(diǎn)的時(shí)候，顯示提示信息。
val.trim()方法主要是用戶輸入內(nèi)容中兩端空格。
getRegMsg()自定義函數(shù)用來獲取文本框中相對(duì)應(yīng)的正則和提示信息。
test()方法用于獲取當(dāng)前input框輸入的內(nèi)容是否是正則匹配的模式，如果是則返回true，顯示驗(yàn)證成功的信息。如果不是則返回false，顯示錯(cuò)誤的信息。
3.編寫error()和success()函數(shù)分別用于驗(yàn)證錯(cuò)誤信息、成功信息
// 成功function success(obj, msg) {obj.className = 'success';obj.innerHTML = msg;}// 失敗function error(obj, msg) {obj.className = 'error';obj.innerHTML = msg + '，請(qǐng)重新輸入';}
在上面代碼中，obj參數(shù)表示顯示提示信息的元素對(duì)象，msg參數(shù)表示自定義的錯(cuò)誤信息。
4.獲取驗(yàn)證規(guī)則和提示信息getRegMsg()函數(shù)
項(xiàng)目分析
① 用戶名：長度4~12，英文大小寫字母。
正則：/^[a-zA-Z]{4,12}$/。
② 密碼：長度6~20，大小寫字母、數(shù)字或下劃線。
正則：/^.{6,20}$/。
③ 確認(rèn)密碼：要求與密碼框一樣，且兩次輸入相同。
正則：RegExp(‘^’ + 密碼框的值 + '$')
④ 性別：
正則：/^[0-1]*$/。
⑤ 手機(jī)號(hào)碼：13、14、15、17、18開頭的11位手機(jī)號(hào)。
正則：/^1[34578]\d{9}$/。
⑥郵箱：用戶名@域名（域名后綴至少2個(gè)字符）。
正則：/^(\w+(_|-|.)*)+@(\w+(-)?)+(.\w{2,})+$/。
代碼如下所示：
function getRegMsg(name, display) {var reg = msg = '';switch (name) {case 'user':reg = /^[a-zA-Z]{4,12}$/;msg = {'success': '用戶名輸入正確', 'error': display};break;case 'passWord':reg = /^.{6,20}$/;msg = {'success': '密碼輸入正確', 'error': display};break;case 'repassWord':var con = document.getElementsByTagName('input')[1].value;reg = RegExp("^" + con + "$");msg = {'success': '兩次密碼輸入正確', 'error': '兩次輸入的密碼不一致'};break;case 'sex':reg = /^[0-1]*$/;msg = {'success': '性別已選擇', 'error': '性別不能為空'};break;case 'telephone':reg=/^1[34578]\d{9}$/;msg = {'success': '手機(jī)號(hào)碼輸入正確', 'error': display};break;case 'email':reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;msg = {'success': '郵箱輸入正確', 'error': display};break;}return {'reg': reg, 'msg': msg};}
在上面代碼中， "/^[a-zA-Z]{4,12}$/"表示匹配只包含大小寫的英文字母；
"/^.{6,20}$/"表示匹配由大小寫英文字母、數(shù)字或下劃線長度在6-20范圍內(nèi)；
"RegExp("^" + con + "$")"表示獲取用戶輸入的密碼，把它作為檢驗(yàn)確認(rèn)密碼是否正確的正則匹配模式；
" /^[0-1]*$/"表示數(shù)字1為男，數(shù)字0為女；
"/^1[34578]\d{9}$/"表示11位數(shù)的手機(jī)號(hào)碼，以1開頭，第二個(gè)數(shù)字可以是(3、4、5、7、8)其中的一個(gè)數(shù)字，剩下數(shù)字可以0-9之間任意數(shù)字；
"/^(\w+(_|-|.)*)+@(\w+(-)?)+(.\w{2,})+$/"表示匹配郵箱地址，它有三部分，分別是用戶名、”@“、郵箱域名。
效果圖如下所示：
本文案例參考《JavaScript前端開發(fā)案例教程》，黑馬程序員編著
五、總結(jié)
1.本文基于JavaScript基礎(chǔ)，實(shí)現(xiàn)表單驗(yàn)證的功能。對(duì)每一個(gè)div層、table、tr、td標(biāo)簽元素進(jìn)行詳解，讓讀者更好的理解。
2.在JavaScript中首先是表單項(xiàng)添加失去焦點(diǎn)處理，事件處理函數(shù)為inputBlur()。該函數(shù)用于獲取表單name、value及提示信息后，去除空白后，若內(nèi)容為空調(diào)用error()給出提示，否則進(jìn)行驗(yàn)證。
3.代碼沒有那么復(fù)雜，希望對(duì)你有所幫助！
最后需要本文項(xiàng)目代碼的小伙伴，請(qǐng)?jiān)诠娞?hào)后臺(tái)回復(fù)“表單驗(yàn)證”關(guān)鍵字進(jìn)行獲取，如果在運(yùn)行過程中有遇到任何問題，請(qǐng)隨時(shí)留言或者加小編好友，小編看到會(huì)幫助大家解決bug噢！
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬水千山總是情，點(diǎn)個(gè)【在看】行不行