jQuery.validator 详解二

一、插件结构(组织方式)

在讲述如何对元素进行验证前有必要了解它的代码组织方式，请看代码(部分省略)

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( $ ){
    // 插件实现
});

 

二、如何对表单元素验证

验证的触发方式：

1、表单提交：将会对所有不是可选的表单元素进行验证

2、当触发focusout事件，且表单元素value不为空(即是必需的，不是可选的)，则会对事件目标元素进行验证

3、当触发focusin事件，且在focusout事件中对目标元素验证过，才会在focusin事件中对目标元素进行验证

如何验证：

首先获取元素的匹配规则，然后轮循匹配规则，进行验证

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

如果验证未通过，将会把元素的name，rule，message记录给 validator.errorList 数组，并且会生成一个包含错误消息的label元素，插入在表单元素的后面
检测所有表单元素是否通过验证只需判断 validator.errorList === 0;

三、配置对象

{
    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 属性；

四、自定义你的错误消息提示文案

$.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的数."