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

時間 2019-12-05

標籤簡單好用表單校驗插件 jquery validate 基本使用方法總結欄目 HTML 简体版

原文原文鏈接

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

1.基本用法

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

其次既然是表單校驗，首先得有一個表單，即form標籤，而後因爲瀏覽器是經過name屬性來提交表單數據的，因此須要給校驗的控件都加上name屬性。git

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

先看第一種ajax

 1         <form id="loginForm" name='f' action='/auth/login' method='POST'>
 2             <div class="el-form-item">
 3                 <input type="text" name='username' id="username" placeholder="用戶名" class="el-input" required>
 4             </div>
 5             <div class="el-form-item">
 6                 <input type="password" name='password' id="password" placeholder="密碼" class="el-input" required>
 7             </div>
 8             <div class="login-btn">
 9                 <button type="submit" class="el-button">登陸</button>
10             </div>
11         </form>

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

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

仍是上面的用戶登陸，html是基本寫法函數

 1         <form id="loginForm" name='f' action='/auth/login' method='POST'>
 2             <div class="el-form-item">
 3                 <input type="text" name='username' id="username" placeholder="用戶名" class="el-input">
 4             </div>
 5             <div class="el-form-item">
 6                 <input type="password" name='password' id="password" placeholder="密碼" class="el-input">
 7             </div>
 8             <div class="login-btn">
 9                 <button type="submit" class="el-button">登陸</button>
10             </div>
11         </form>

 1     $("#loginForm").validate({
 2         rules:{
 3             username:"required",
 4             password:"required",
 5         },
 6         messages:{
 7             username:"請輸入用戶名",
 8             password:"請輸入密碼",
 9         }
10     });

這樣感受更直觀清晰。ui

2.內置驗證方式

rules裏每一個控件能夠給多個驗證方式，經常使用的有：this

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（不一樣於）等。

1     jQuery.validator.addMethod( "notEqualTo", function( value, element, param ) {
2         return this.optional(element) || !$.validator.methods.equalTo.call( this, value, element, param );
3     }, "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{}
    });