簡單好用的表單校驗插件——jQuery Validate基本使用方法總結

jquery validate當前最新版本是1.17.0，下載鏈接是：https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0

1.基本用法

從字面就知道既然是jquery的插件，首先得引入jquery，然后下載jquery-validate.js后引入。

其次既然是表單校驗，首先得有一個表單，即form標簽，然后由於瀏覽器是通過name屬性來提交表單數據的，所以需要給校驗的控件都加上name屬性。

校驗的寫法有兩種，一種是把校驗規則寫在控件中，另一種是寫在js里。

先看第一種

        <form id="loginForm" name='f' action='/auth/login' method='POST'>
            <div class="el-form-item">
                <input type="text" name='username' id="username" placeholder="用戶名" class="el-input" required>
            </div>
            <div class="el-form-item">
                <input type="password" name='password' id="password" placeholder="密碼" class="el-input" required>
            </div>
            <div class="login-btn">
                <button type="submit" class="el-button">登錄</button>
            </div>
        </form>

required屬性表示必填，默認情況下在點擊提交按鈕的時候會觸發表單校驗，之后input在失焦、keyup事件的時候都會校驗。

我比較推薦的是第二種寫法，即把校驗規則寫在js里，對象的形式可以規則和提示信息一一對應起來。

還是上面的用戶登錄，html是基本寫法

        <form id="loginForm" name='f' action='/auth/login' method='POST'>
            <div class="el-form-item">
                <input type="text" name='username' id="username" placeholder="用戶名" class="el-input">
            </div>
            <div class="el-form-item">
                <input type="password" name='password' id="password" placeholder="密碼" class="el-input">
            </div>
            <div class="login-btn">
                <button type="submit" class="el-button">登錄</button>
            </div>
        </form>

    $("#loginForm").validate({
        rules:{
            username:"required",
            password:"required",
        },
        messages:{
            username:"請輸入用戶名",
            password:"請輸入密碼",
        }
    });

這樣感覺更直觀清晰。

2.內置驗證方式

rules里每個控件可以給多個驗證方式，常用的有：

required 必填驗證元素。

minlength(length) maxlength(length) rangelength(range) 設置最小長度、最大長度和長度范圍 [min,max]。

min(value) max(value) range(range) 設置最大值、最小值和值的范圍。

email() 驗證電子郵箱格式。

url() 驗證 URL 格式。

date() 驗證日期格式（類似 30/30/2008 的格式，不驗證日期准確性只驗證格式）。

number() 驗證十進制數字（包括小數的）。

digits() 驗證整數。

equalTo(other) 驗證兩個輸入框的內容是否相同。修改密碼時經常使用。

3.錯誤信息顯示

默認情況在校驗失敗時會創建calss為error的label標簽存放錯誤提示信息，並放在當前校驗控件的后面，即error.appendTo(element.parent());

如果要自定義顯示位置的話可以使用 errorPlacement：callBack修改

errorPlacement: function(error, element) {  
    //error為校驗失敗創建的信息提示標簽，element為當前校驗控件  
}

errorClass 可以指定標簽類名。

errorElement 可以指定標簽類型。

errorLabelContainer 可以把錯題信息統一放在一個容器里。

wrapper 用什么標簽再把上邊的 errorELement 包起來。

關於樣式的修改，校驗失敗當前校驗控件也會添加error類名，所以可以定義input.error和label.error的樣式。

4.校驗成功的信息顯示

校驗成功可以設置success:"className"來設置樣式，也可以在success后接一個函數為校驗成功后的操作。

    $("#loginForm").validate({
        rules:{
            username:"required",
            password:"required",
        },
        messages:{
            username:"請輸入用戶名",
            password:"請輸入密碼",
        },
        success: "valid"
    });

5.添加自定義校驗

使用addMethod(name,method,message)添加自定義校驗，三個參數分別為：自定義校驗的名稱、方法、提示信息。

在 additional-methods.js 文件中存在一些擴展的自定義校驗方法，如notEqualTo（不同於）等。

    jQuery.validator.addMethod( "notEqualTo", function( value, element, param ) {
        return this.optional(element) || !$.validator.methods.equalTo.call( this, value, element, param );
    }, "Please enter a different value, values must not be the same." );

method的三個參數分別為：校驗控件中的value值、校驗控件元素、調用此校驗方法中的參數（如equalTo("#newPassword")，param為“#newPassword”）。

this.optional(element)用於表單控件的值不為空時才觸發驗證。當表單的值為空時，this.optional(element) == true，即可以不填但是格式不能錯的場景。

method返回值true為驗證成功，false為驗證失敗。

6.使用普通按鈕代替submit校驗

很多時候我們提交表單並不是用的form形式，而是ajax，這時候就不能用submit來觸發了。

validator()會返回一個對象，這個對象下的form()方法可以驗證 form 返回成功還是失敗。

function validform(){
        return $("#changePasswordForm").validate({
            rules:{
                oldPassword:"required",
                newPassword:{
                    required:true,
                    notEqualTo:"#oldPassword"
                },
                newPassword2:{
                    required:true,
                    equalTo:"#newPassword"
                },
            },
            messages:{
                oldPassword:"原密碼不能為空",
                newPassword:{
                    required:"新密碼不能為空",
                    notEqualTo:"新密碼不能與原密碼重復"
                },
                newPassword2:{
                    required:"請確認新密碼",
                    equalTo:"兩次密碼輸入不一致"
                },
            }
        });
    }
    //注冊表單驗證
    $(validform());

    //點擊按鈕事件
    $("#submitBtn").click(function(){
        if (validform().form()) {
            //請求ajax
            ajaxSubmit();
        }else{}
    });

7.需要注意的點

有時候會遇到form表單中按鈕點擊時自動執行表單提交操作的問題，或者點擊form中的按鈕請求ajax，可是自動在url后拼了一段奇怪的字符串導致請求status為cancel。

原因是沒有給button按鈕規定 type 屬性。

button按鈕如果沒有指定type屬性的話，Internet Explorer 的默認類型是 "button"，而其他瀏覽器中（包括 W3C 規范）的默認值是 "submit"。

 

還有更詳細的內容沒有整理，比如validator其他的常用方法，校驗方式，radio、checkbox、select的校驗等等。

具體參考菜鳥教程：http://www.runoob.com/jquery/jquery-plugin-validate.html