本篇內(nèi)容介紹了“如何使用JavaScript實(shí)現(xiàn)表單驗(yàn)證”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

十載的鐵西網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整鐵西建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“鐵西網(wǎng)站設(shè)計(jì)”,“鐵西網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

一、前言

在Web項(xiàng)目開(kāi)發(fā)中，經(jīng)常會(huì)看到表單驗(yàn)證的功能。例如，用戶注冊(cè)、用戶登錄等，需要對(duì)用戶填寫的內(nèi)容進(jìn)行驗(yàn)證。接下來(lái)，小編帶著大家一起來(lái)實(shí)現(xiàn)表單驗(yàn)證的用戶名、密碼、性別、手機(jī)號(hào)碼、郵箱驗(yàn)證的功能。

二、項(xiàng)目準(zhǔn)備

開(kāi)發(fā)工具：HBuilderX

瀏覽器：Google Chrome瀏覽器

三、項(xiàng)目目標(biāo)

1.了解什么是正則表達(dá)式。

2.掌握正則表達(dá)式的語(yǔ)法。

3.學(xué)會(huì)應(yīng)用正則表達(dá)式。

四、項(xiàng)目實(shí)現(xiàn)

HTML

<div class="box">             <div class="box-head"><h2>歡迎注冊(cè)</h2><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="長(zhǎng)度4-12位，英文大小寫字母">                             </td>                             <td>                                 <div></div>                             </td>                         </tr>                         <tr>                             <th>密碼：</th>                             <td><input type="password" id="passWord" name="passWord" placeholder="長(zhǎng)度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開(kāi)頭的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è)頁(yè)面所有的input元素，為每個(gè)input框添加失去焦點(diǎn)事件，利用for循環(huán)來(lái)添加事件處理函數(shù)inputBlur()。

2.寫inputBlur()事件處理函數(shù)，該函數(shù)主要用于獲取相應(yīng)input元素的驗(yàn)證規(guī)則和提示信息，用戶輸入的內(nèi)容進(jìn)行檢驗(yàn)，之后，把檢驗(yàn)的結(jié)果顯示在HTML頁(yè)面中，代碼如下所示：

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ù)用來(lái)獲取文本框中相對(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)目分析

① 用戶名：長(zhǎng)度4~12，英文大小寫字母。

正則：/^[a-zA-Z]{4,12}$/。

② 密碼：長(zhǎng)度6~20，大小寫字母、數(shù)字或下劃線。

正則：/^.{6,20}$/。

③ 確認(rèn)密碼：要求與密碼框一樣，且兩次輸入相同。

正則：RegExp(‘^’ + 密碼框的值 + '$')

④ 性別：

正則：/^[0-1]*$/。

⑤ 手機(jī)號(hào)碼：13、14、15、17、18開(kāi)頭的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ù)字或下劃線長(zhǎng)度在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開(kāi)頭，第二個(gè)數(shù)字可以是(3、4、5、7、8)其中的一個(gè)數(shù)字，剩下數(shù)字可以0-9之間任意數(shù)字;

"/^(\w+(_|-|.)*)+@(\w+(-)?)+(.\w{2,})+$/"表示匹配郵箱地址，它有三部分，分別是用戶名、”@“、郵箱域名。

效果圖如下所示：

 

本文案例參考《JavaScript前端開(kāi)發(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)證。

“如何使用JavaScript實(shí)現(xiàn)表單驗(yàn)證”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁(yè)名稱：如何使用JavaScript實(shí)現(xiàn)表單驗(yàn)證
網(wǎng)頁(yè)鏈接：http://www.chinadenli.net/article38/igjepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、軟件開(kāi)發(fā)、ChatGPT、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)