歡迎注冊(cè)
已有賬號(hào)？登錄

在上面代碼中，使用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.寫(xiě)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.編寫(xiě)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，英文大小寫(xiě)字母。

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

② 密碼：長(zhǎng)度6~20，大小寫(xiě)字母、數(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}$/"表示匹配只包含大小寫(xiě)的英文字母;

"/^.{6,20}$/"表示匹配由大小寫(xiě)英文字母、數(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)證。

3.代碼沒(méi)有那么復(fù)雜，希望對(duì)你有所幫助!