jQuery.validator 詳解二

1、插件結構(組織方式)

在講述如何對元素進行驗證前有必要了解它的代碼組織方式，請看代碼(部分省略)

var plugFn = function( $ ) {
    $.extend($.fn, {
        // 驗證from表單
        validate: function( options ) {
            // ...
            // 實例化$.validator對象
            var validator = new $.validator( options, this[0] );
            // 當表單提交時，經過調用$.validator的原型方法form來驗證表單元素
            this.onsubmit(function(){
                if ( validator.form() ){
                    return true;
                }
                return false;
            });
        },
        // 獲取元素的驗證規則，須要逐一驗證
        rules: function( command, argument ) {
            // ...
        }
    });

    // constructor for validator
    // 構造函數
    $.validator = function( options, form ) {
        this.settings = $.extend( true, {}, $.validator.defaults, options );
        this.currentForm = form;
        this.init();
    };

    $.extend( $.validator, {
        // 定義$.validator的屬性，方法
        defaults: {

        },
        setDefaults: function( settings ) {
            
        },
        // ...
        // 供$.validator實例使用
        prototype: {
            init: function() {
                // ...
                // 初始化代碼
            },
            form: function() {

            },
            checkForm: function() {

            },
            elements: function() {

            },            
            check: function( element ) {

            },
            showErrors: function( errors ) {

            },
            valid: function() {
                return this.size() === 0;
            },
            size: function() {
                return this.errorList.length;
            },            
            // ...
        }
    });
    // ...
};

首先將實現插件的代碼包裝爲一個函數，由於插件是須要在jQuery上定義的，所以調用plugFn函數須要傳遞參數 jQuery 或 $ 變量；在插件中定義了構造函數 $.validator 及其屬性，方法，以及 原型對象方法，在擴展$.fn的原型方法validate中，實例化了一個
$.validator對象，並調用實例方法，這就是插件的整個實現邏輯。

 

// 爲了兼容 requirejs（requirejs遵循AMD規範），將代碼包裝爲以下：

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery"], factory );
    } else {
        factory( jQuery );
    }
}( plugFn ));

當define類型爲函數，且存在define.amd，代碼執行以下：

// 需配置好 jquery 引用路徑
require.config({
    paths: {
        jquery: 'jquery-1.11.1'
    }
});

// 其中的匿名函數就是 上面的 plugFn 函數
define(['jquery'], function( $ ){
    // 插件實現
});

 

2、如何對錶單元素驗證

驗證的觸發方式：

一、表單提交：將會對全部不是可選的表單元素進行驗證

二、當觸發focusout事件，且表單元素value不爲空(便是必需的，不是可選的)，則會對事件目標元素進行驗證

三、當觸發focusin事件，且在focusout事件中對目標元素驗證過，纔會在focusin事件中對目標元素進行驗證

如何驗證：

首先獲取元素的匹配規則，而後輪循匹配規則，進行驗證

$(ele).rules();
validator.check(ele);

若是驗證未經過，將會把元素的name，rule，message記錄給 validator.errorList 數組，而且會生成一個包含錯誤消息的label元素，插入在表單元素的後面
檢測全部表單元素是否經過驗證只需判斷 validator.errorList === 0;

 

3、配置對象

{
    errorClass: "error",              // 消息錯誤提示容器，驗證未經過的表單元素的的className
    validClass: "valid",              // 驗證經過的表單元素的的className
    errorElement: "label",            // 消息錯誤提示容器的的tagName
    wrapper: element.tagName,         // 只能是一個標籤名，如:div, strong ...，將會建立一個div元素包裹 錯誤消息提示的label元素
    errorLabelContainer: selector,    // 若是表單驗證不經過，全部錯誤消息提示的label元素都會插入到該元素中

    debug： true,                     // 爲true將會 阻止表單提交，但會驗證表單控件
    ignore: ':hidden',                // 將會忽略選擇器匹配的全部表單元素的驗證
    submitHandler: function(){        // 表單提交時，將會觸發這個函數，若是存在該函數，將會阻止表單提交

    },
    invalidHandler: function(){       // 若是表單驗證不經過，將會觸發這個函數

    }
}

爲表單元素添加驗證規則的配置請見：jQuery.validator 驗證規則詳解

小提示：設置debug爲true,將會阻止表單提交，但會驗證表單；還有一種相反的行爲，不會驗證表單，直接提交，那就須要在提交按鈕的 class 屬性上加一個 cancel 的className 或者 加上一個HTML5的 formnovalidate 屬性；

 

4、自定義你的錯誤消息提示文案

$.validator.messages = {
    required: "輸入不能爲空.",
    remote: "用戶名已經存在.",    // 本身定義
    email: "請輸入一個有效的電子郵件地址.",
    url: "請輸入一個有效的URL.",
    date: "請輸入一個有效的日期.",
    dateISO: "請輸入一個有效的日期 ( ISO ) ( 例：2014/08/28 ).",
    number: "請輸入一個有效的數字.",
    digits: "請輸入一個正整數.",
    creditcard: "請輸入一個有效的信用卡號.",
    equalTo: "請再次輸入相同的值.",
    maxlength: $.validator.format( "請輸入不超過{0}個字符." ),
    minlength: $.validator.format( "請輸入至少{0}個字符." ),
    rangelength: $.validator.format( "請輸入一個字符長{0}至{1}的字符." ),
    range: $.validator.format( "請輸入一個{0}至{1}的數." ),
    max: $.validator.format( "請輸入一個值小於或等於{0}的數." ),
    min: $.validator.format( "請輸入一個值大於或等於{0}的數." )
};

看看上面的代碼，怎麼出現了相似這種 $.validator.format( "請輸入不超過{0}個字符." ) 值呢

直接看源碼：

$.validator.format = function( source, params ) {
    // 只傳遞了一個參數
    if ( arguments.length === 1 ) {
        // 返回一個匿名函數，調用的時候確定會帶上參數的，別急
        return function() {
            var args = $.makeArray( arguments );
            // 將source插入到最前面
            args.unshift( source );
            
            // 若是匿名函數帶上了參數，將會執行$.validator.format後面的部分代碼了，不然永遠都是執行前面的代碼
            return $.validator.format.apply( this, args );
        };
    }

    // 參數個數大於2， 如:$.validator.format(source, 10, 20)
    if ( arguments.length > 2 && params.constructor !== Array  ) {
        params = $.makeArray( arguments ).slice( 1 );
    }
    // 參數個數等於2， 如:$.validator.format(source, 10)
    if ( params.constructor !== Array ) {
        params = [ params ];
    }

    // 將 {0} 或 {1} 替換成真正的實參
    $.each( params, function( i, n ) {
        source = source.replace( new RegExp( "\\{" + i + "\\}", "g" ), function() {
            return n;
        });
    });
    return source;
};

看看怎麼來使用它：

// $.validator.format使用實例

$.validator.messages.maxlength(4); // "請輸入不超過4個字符."
$.validator.messages.range(10, 100);    // "請輸入一個10至100的數."