表單驗證外掛（validate.js），是一款驗證常規表單資料合法性的外掛。使用該外掛可以極大的簡化了在表單上繁雜的驗證過程，並且錯誤提示顯示的完善也增加了使用者體驗。

1. 使用 validate.js 外掛

該外掛文件中最重要的檔案是 validate.js，還有兩個可選的輔助檔案：additional-methods.js（控制元件 class方式）和 message_zh.js（提示漢化）檔案。由於message_zh.js文件較小，如果要使用漢化提示，可以直接將validate.js文件中相應的程式碼替換成message_zh.js中的程式碼。
使用validate.js 外掛第一步需要引入jquery以及下載的validate.js（jquery需要在外掛之前引入）

    <script type="text/javascript" src="jquery-2.2.3.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>

第二步：在 JS 檔案對相應的form呼叫validate()

$('#reg').validate();

2. 常用預設驗證規則

Validate.js 的預設驗證規則的寫法有兩種形式：（1）控制元件屬性方式；（2）JS 鍵值對傳參方式。我們通過驗證使用者名稱跟郵箱來展示其用法：

（1）控制元件屬性方式

<form id="reg" action="123.html">
    <p>賬號：<input class="required" minlength="2" type="text" name="user" value="" /></p>
    <p>郵箱：<input class="required email" type="text" name="email" value="" /></p>
    <input type="submit" value="提交" />
</form>

這種方法直接在html標籤上設定其屬性，不需要過多的去寫JS程式碼。但是如果需要控制的屬性較多的屬性時，就會使得html標籤過於冗長。而且這種形式不能設定指定的錯誤提示資訊，因此大部分情況下我們會使用第二種方法。

（2）JS 鍵值對傳參方式

$(function(){

    $('#reg').validate({

        rules : {
            user : {
                    required : true, 
                    minlength : 2
                    },
            email : {
                    required : true,
                    email : true
                    }
                },          

        messages : {
            user : {
                    required : '帳號不得為空！',   // 提示資訊可以自己定義
                    minlength : '帳號不得小於 2 位！',
                    },
            email : {
                    required : '帳號不得為空！',  
                    email : '注意！請輸入正確的郵箱格式',
                    },
                    }
          });
});

3. validate()的方法和選項

3.1 jQuery.format 格式化錯誤提示

當我們根據需求修改預設驗證規則時，也需要在提示錯誤資訊時對應的顯示，因此就可以用到格式化錯誤提示，就比如我們修改了上述的賬號的長度為3~5：

$(function(){

    $('#reg').validate({

        rules : {
            user : {
                    required : true, 
                    rangelength:[3,5]
                    }
                },          

        messages : {
            user : {
                    required : '帳號不得為空！',   
                    rangelength : '帳號長度需要在 {0}-{1} 位之間！', //{}表示對應的第幾個數
                    },
                    }
          });
});

3.2 開啟除錯模式禁止提交

當我們在除錯時，只需要檢測能否驗證，而不需要頁面進行跳轉時，可以開啟除錯模式禁止提交

$('#reg').validate({
    debug : true,
});

如果有多個表單，為了不需要每個表單下都寫一遍上述程式碼，可以在全域性環境下設定除錯模式

$.validator.setDefaults({
    debug : true,
});

當我們需要阻止表單提交的時候，還要執行程式，這時就可以設定其他方式代替預設提交

$('#reg').validate({
    submitHandler : function(){
    // some action
    },
});

該函式內程式是當驗證成功後執行，而且阻止了預設提交，一般用於ajax提交使用。

3.3 設定成功後加載的樣式

Validate.js外掛內建的驗證成功的樣式為”valid”，我們可以在CSS樣式中自定義valid的樣式：

.valid{
    background: url(right.png) no-repeat right;
    background-size: auto 100%;
    border: 2px solid green;
}

這樣輸入的格式如果通過驗證，即可顯示相應的格式。我在上述樣式中設定成如果驗證成功，即將input輸入框邊框設定為綠色並且新增一個綠色小勾，當輸入驗證通過得到結果為：

當然，也可以修改驗證提示訊息，可以自定義標籤的樣式以及新增文字說明：

success : function(label){
        label.addClass('labelStyle').text('ok');
        },

labelStyle為自己定義的樣式類。

3.4 高亮顯示有錯誤的元素

當我們在提交時，如果表單中有的輸入框填寫錯誤，需要高亮顯示出來錯誤的位置，這時需要用到高亮顯示：

highlight : function(element,errorClass){
     $(element).css('border','3px solid red');
     },

當輸入成功時，需要取消高亮顯示的錯誤，需要用到unhighlight：

unhighlight : function(element,errorClass){
     $(element).css('border','1px solid green');
     }

另外，Validate()還有一些其他的屬性和方法，比如表單提交時獲取資訊：invalidHandler，獲取錯誤提示：showErrors等。

4. remote非同步驗證

remote:url，可以對錶單進行 ajax 驗證，預設會提交當前驗證的值到遠端地址。例如我們在註冊時，需要通過後臺伺服器驗證該賬號是否被註冊，這時就需要用到ajax，其具體使用方法可參照下面：

rules : {
        user : {
                required : true, 
                rangelength:[3,5],
                remote : 'user.php',
                }
                },          

messages : {
        user : {
                required : '帳號不得為空！',   
                rangelength : '帳號長度需要在 {0}-{1} 位之間！',
                remote : '賬號被佔用',
                },
                },

user.php為後臺驗證程式，只是為了簡單的驗證，我們只設置一個user值，對應php程式碼如下：

<?php
if ($_GET['user']=="sean") {
    echo 'false';
}else{
    echo 'true';
}
?>

當輸入的賬號為“sean”時，就會提示賬號被佔用。加入在登入的時候，我們要同時驗證賬號跟密碼，需要傳送多個數據，這時就需要用到data選項

<!--HTML程式碼-->
<form id="reg" action="123.html">
    <p>賬號：<input type="text" name="user" id="user" value="" /></p>
    <p>密碼：<input type="text" name="password" value="" /></p>
    <input type="submit" value="提交" />
</form>

//JS程式碼
$(function(){

    $('#reg').validate({
        rules : {
            user : {
                    required : true, 
                    rangelength:[3,5],
                    },
            password : {
                    required : true, 
                    minlength: 6,
                    remote : {
                        url : 'user.php',
                        type :'GET',
                        data:{
                            user: function(){
                                return $('#user').val();
                            },
                        }
                    },
                    },
            },

        messages : {
            user : {
                    required : '帳號不得為空！',   
                    rangelength : '帳號長度需要在 {0}-{1} 位之間！',
                    remote : '賬號被佔用',
                    },
            password : {
                    required : '密碼不得為空', 
                    minlength: '密碼長度不得小於6位數',
                    remote : '賬號或者密碼錯誤',
                    },
            },

        });     
});

//後臺PHP程式碼
<?php
if ($_GET['user']=="sean" && $_GET['password']=="123456") {
    echo 'true';
}else{
    echo 'false';
}
?>