用 jQuery 實現表單驗證（摘抄）——選自《鋒利的jQuery》（第2版）第5章的例題 5.1.5 表單驗證

時間  2019-11-11
標籤 jquery 實現 表單 驗證 摘抄 選自 鋒利的jQuery 例題 5.1.5 欄目 JQuery 简体版
原文   原文鏈接

5.1.5 表單驗證html

      表單（form）做爲 HTML 最重要的一個組成部分，幾乎在每一個網頁上都有體現，例如用戶提交信息、用戶反饋信息和用戶查詢信息等，所以它是網站管理者與瀏覽者之間溝通的橋樑。在表單中，表單驗證的做用也是很是重要的，它能使表單更加靈活、美觀和豐富。
jquery

      以一個簡單的用戶註冊爲例。首先新建一個表單， HTML 代碼以下：數據庫

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>jQueryStudy</title>
    <style>
     .int{ height: 30px; text-align: left; width: 600px; }
     label{ width: 200px; margin-left: 20px; }
     .high{ color: red; }
     .msg{ font-size: 13px; }
     .onError{ color: red; }
     .onSuccess{ color: green; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>    
</head>
<body>
    <form method="post" action="#">
        <div class="int">
            <label for="name">姓名：</label>
            <input type="text" id="name" class="required" />
        </div>
        <div class="int">
            <label for="email">郵箱：</label>
            <input type="text" id="email" class="required" />
        </div>
        <div class="int">
            <label for="address">住址：</label>
            <input type="text" id="address" />
        </div>
        <div class="int">
            <input type="submit" value="提交" id="send" style="margin-left: 70px;" />
            <input type="reset" value="重置" id="res" />
        </div>
    </form>    
</body>
</html>
複製代碼

       顯示效果如圖 1 所示：api

            

                             圖 1 表單初始化瀏覽器

     在表單內 class 屬性爲 「required」 的文本框是必須填寫的，所以須要將它與其餘的非必須填寫的表單元素加以區別，即在文本框後面追加一個紅色的星號標識。可使用 append() 方法來完成，代碼以下：服務器

複製代碼 
　　 //爲表單的必填文本框添加提示信息（選擇form中的全部後代input元素）
    $("form :input.required").each(function () {
        //經過jquery api：$("HTML字符串") 建立jquery對象
        var $required = $("<strong class='high'>*</strong>");
        //添加到this對象的父級對象下
        $(this).parent().append($required);
    });
複製代碼

       顯示效果如圖 2 所示：app

           

                           圖 2 在必填元素後添加小紅星標記函數

      用戶在「姓名」文本框中填寫完信息後，將光標的焦點從「姓名」文本框中移出時，須要即時判斷姓名是否符合驗證規則。當光標的焦點從「郵箱」文本框移出時，也須要即時判斷「郵箱」填寫是否正確，所以須要給表單元素添加失去焦點事件，即 blur 事件。 jQuery 代碼以下：post

 　　//爲表單的元素添加失去焦點事件
    $("form :input").blur(function () {
        // ...省略代碼
    });

        給表單裏的必填元素添加驗證功能的步驟以下：
字體

     （1）判斷當前失去焦點的元素是「姓名」仍是「郵箱」，而後分別處理。    

     （2）若是是「姓名」，判斷元素的值的長度是否小於 6 ，若是小於 6 ，則用紅色字體提醒用戶輸入不正確，反之，則用綠色提醒用戶輸入正確。

     （3）若是是「郵箱」，判斷元素的值是否符合郵箱的格式，若是不符合，則用紅色字體提醒用戶輸入不正確，反之，則用綠色字體提醒用戶輸入正確。    

     （4）將提醒信息追加到當前元素的父元素下面。    

      【注】：爲了使用方便，當 text 文本框中的內容格式錯誤時，程序應儘可能把全部提示信息都顯示出來，而不是每次驗證一種格式後只顯示一個提示信息。 不過有時爲了提升響應性，也會每次只顯示一個提示信息。如：檢查用戶名是否重複，須要訪問數據庫。

如何提示，須要依據具體的業務需求來肯定。

       根據以上分析，能夠寫出以下 jQuery 代碼：

複製代碼 
　　　　 //爲表單的必填文本框添加提示信息（選擇form中的全部後代input元素）
        $("form :input.required").each(function () {
            //經過jquery api：$("HTML字符串") 建立jquery對象
            var $required = $("<strong class='high'>*</strong>");
            //添加到this對象的父級對象下
            $(this).parent().append($required);
        });

        //爲表單元素添加失去焦點事件
        $("form :input").blur(function(){
            var $parent = $(this).parent();
            //驗證姓名
            if($(this).is("#name")){
                var nameVal = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
                var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){
                    var errorMsg = " 姓名非空，長度6位以上，不包含特殊字符！";
                    //class='msg onError' 中間的空格是層疊樣式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 輸入正確";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
            //驗證郵箱
            if($(this).is("#email")){
                var emailVal = $.trim(this.value);
                var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;
                if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){
                    var errorMsg = " 請輸入正確的E-Mail住址！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 輸入正確";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
        });
複製代碼

       當連續幾回輸入錯誤的格式後，會出現如圖 3 所示的效果

         

                                    圖 3 操做屢次的提示效果

      因爲每次在元素失去焦點後，都會建立一個新的提醒元素，而後將它追加到文檔中，最後就出現了屢次的提醒信息。所以，須要在建立提醒元素以前，將當前元素之前的提醒元素都刪除。可使用 remove() 方法來完成，代碼以下：  

複製代碼 
//爲表單元素添加失去焦點事件
$("form :input").blur(function(){ 
    var $parent = $(this).parent();
    $parent.find(".msg").remove(); //刪除之前的提醒元素（find()：查找匹配元素集中元素的全部匹配元素）
    // ...省略代碼
});
複製代碼

      顯示效果如圖 4 所示。

        

                               圖 4 正確的效果

      當鼠標在表單元素中屢次失去焦點時，均可以提醒用戶填寫是否正確。可是，若是用戶無視錯誤提醒，執意要單擊「提交」按鈕時，爲了使表單填寫準確，在表單提交以前，須要對錶單的必須填寫元素進行一次總體的驗證。能夠直接用 trigger() 方法來觸發blur事件，從而達到驗證效果。若是填寫錯誤，就會以紅色提醒用戶；若是姓名和郵箱都不符合規則，那麼就有兩處錯誤，即有兩個 class 爲 「onError」 的元素，所以能夠根據 class 爲 「onError」 元素的長度來判斷是否能夠提交。若是長度爲 0 ，即 true ，說明已經能夠提交了；若是長度大於0，即 false ，說明有錯誤，須要阻止表單提交。阻止表單提交能夠直接用 「return false」 語句。      

      根據上面的分析，能夠在提交事件中寫出以下jQuery代碼：  

複製代碼 
//點擊重置按鈕時，經過trigger()來觸發文本框的失去焦點事件
$("#send").click(function(){
    //trigger 事件執行完後，瀏覽器會爲submit按鈕得到焦點
    $("form .required:input").trigger("blur"); 
    var numError = $("form .onError").length;
    if(numError){
        return false;
    }
    alert("註冊成功！");
});
複製代碼

      顯示效果如圖 5 所示。

        

                          圖 5 驗證經過

      用戶也許會提出：爲何每次都要等字段元素失去焦點後，才提醒是否正確？若是輸入時就能夠提醒，這樣就能夠更加即時了。

      爲了達到用戶提出的需求，須要給表單元素綁定 keyup 事件和 focus 事件，keyup 事件能在用戶每次鬆開按鍵時觸發，實現即時提醒；focus 事件能在元素獲得焦點的時候觸發，也能夠實現即時提醒。

      代碼以下：

複製代碼 
$("form :input").blur(function(){ 
    //失去焦點處理函數
    //代碼省略...
}).keyup(function(){
    //triggerHandler 防止事件執行完後，瀏覽器自動爲標籤得到焦點
    $(this).triggerHandler("blur"); 
}).focus(function(){
    $(this).triggerHandler("blur");
});
複製代碼

       這樣當用戶將光標定位到文本框上和改變文本框的值時，表單就會即時提醒用戶填寫是否正確，從而符合了用戶的需求。      

      在前面的章節已經提過，trigger（「blur」）不只會觸發爲元素綁定的blur事件，也會觸發瀏覽器默認的 blur 事件，即不能講光標定位到文本框上。而 triggerHandler（「blur」）只會觸發爲元素綁定的 blur 事件，而不觸發瀏覽器默認的 blur 事件。      

      至此，表單驗證過程就所有完成。讀者能夠根據本身的實際需求修改驗證規則。 

     【注】：客戶端的驗證僅用於提高用戶的操做體驗，而服務器仍需對用戶輸入的數據的合法性進行校驗。對於禁用了腳本的用戶和用戶自制的網頁提交操做，必須在服務器端驗證。

完整代碼：

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>jQueryStudy</title>
    <style>
     .int{ height: 30px; text-align: left; width: 600px; }
     label{ width: 200px; margin-left: 20px; }
     .high{ color: red; }
     .msg{ font-size: 13px; }
     .onError{ color: red; }
     .onSuccess{ color: green; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>    
</head>
<body>
    <form method="post" action="#">
        <div class="int">
            <label for="name">姓名：</label>
            <input type="text" id="name" class="required" />
        </div>
        <div class="int">
            <label for="email">郵箱：</label>
            <input type="text" id="email" class="required" />
        </div>
        <div class="int">
            <label for="address">住址：</label>
            <input type="text" id="address" />
        </div>
        <div class="int">
            <input type="submit" value="提交" id="send" style="margin-left: 70px;" />
            <input type="reset" value="重置" id="res" />
        </div>
    </form>
    <script>
        //爲表單的必填文本框添加提示信息（選擇form中的全部後代input元素）
        $("form :input.required").each(function () {
            //經過jquery api：$("HTML字符串") 建立jquery對象
            var $required = $("<strong class='high'>*</strong>");
            //添加到this對象的父級對象下
            $(this).parent().append($required);
        });

        //爲表單元素添加失去焦點事件
        $("form :input").blur(function(){
            var $parent = $(this).parent();
            $parent.find(".msg").remove(); //刪除之前的提醒元素（find()：查找匹配元素集中元素的全部匹配元素）
            //驗證姓名
            if($(this).is("#name")){
                var nameVal = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
                var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){
                    var errorMsg = " 姓名非空，長度6位以上，不包含特殊字符！";
                    //class='msg onError' 中間的空格是層疊樣式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 輸入正確";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
            //驗證郵箱
            if($(this).is("#email")){
                var emailVal = $.trim(this.value);
                var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;
                if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){
                    var errorMsg = " 請輸入正確的E-Mail住址！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 輸入正確";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
        }).keyup(function(){
            //triggerHandler 防止事件執行完後，瀏覽器自動爲標籤得到焦點
            $(this).triggerHandler("blur"); 
        }).focus(function(){
            $(this).triggerHandler("blur");
        });
        
        //點擊重置按鈕時，經過trigger()來觸發文本框的失去焦點事件
        $("#send").click(function(){
            //trigger 事件執行完後，瀏覽器會爲submit按鈕得到焦點
            $("form .required:input").trigger("blur"); 
            var numError = $("form .onError").length;
            if(numError){
                return false;
            }
            alert("註冊成功！");
        });
    </script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程