jQuery.validator 详解二

前言：上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则，这一篇重点讲述它的源码结构，及如何来对元素进行验证，错误消息提示的内部实现

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

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

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

五、源码

最后附上源码，未解析，供给愿意看的同学看

/*! * jQuery Validation Plugin v1.13.0 * * http://jqueryvalidation.org/ * * Copyright (c) 2014 Jörn Zaefferer * Released under the MIT license */(function( factory ) {    if ( typeof define === "function" && define.amd ) {        define( ["jquery"], factory );    } else {        factory( jQuery );    }}(function( $ ) {$.extend($.fn, {    // http://jqueryvalidation.org/validate/    validate: function( options ) {        // if nothing is selected, return nothing; can't chain anyway        if ( !this.length ) {            if ( options && options.debug && window.console ) {                console.warn( "Nothing selected, can't validate, returning nothing." );            }            return;        }        // check if a validator for this form was already created        var validator = $.data( this[ 0 ], "validator" );        if ( validator ) {            return validator;        }        // Add novalidate tag if HTML5.        this.attr( "novalidate", "novalidate" );        validator = new $.validator( options, this[ 0 ] );        $.data( this[ 0 ], "validator", validator );        if ( validator.settings.onsubmit ) {            this.validateDelegate( ":submit", "click", function( event ) {                if ( validator.settings.submitHandler ) {                    validator.submitButton = event.target;                }                // allow suppressing validation by adding a cancel class to the submit button                if ( $( event.target ).hasClass( "cancel" ) ) {                    validator.cancelSubmit = true;                }                // allow suppressing validation by adding the html5 formnovalidate attribute to the submit button                if ( $( event.target ).attr( "formnovalidate" ) !== undefined ) {                    validator.cancelSubmit = true;                }            });            // validate the form on submit            this.submit( function( event ) {                if ( validator.settings.debug ) {                    // prevent form submit to be able to see console output                    event.preventDefault();