JQuery validation源码解析

一.解析目的
解决umeditor富文本编辑器与jquery validation的冲突。并了解其原理。
二、大体结构
1.总体部分

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

引入这段js时，会立即执行function(factory),factory为传入的参数function。由代码看到，实际上是执行传入参数的function。
2.展开上面的参数

$.extend($.fn, {    validate: function( options ) {...},    valid:function(){...},    ...};...$.validator=function(options,form){    ...    this.init();};...$.extend($.validator,{    defaults:{...},    setDefaults:function(settings){...),    ...    prototype:{        init:function(){...},        ...    }});...

上面是整个jquery validation的重要层次结构。由上可知，它扩展了jquery对象的validate与valid方法，同时扩展了一个静态方法validator.
3.Jquery validation的入口
我们使用时，在document ready后会写下这样的代码：$(“#form”).validate(…);这就是它的入口，我们来看看jquery validation扩展的validate方法。

validate:function(options){    ...    validator = new $.validator(options,this[0]);    if(validator.settings.onsubmit){        this.on("click.validate", ":submit",function(event){...};        this.on("submit.validate",function(event){...}    }}

我们看到，在我们程序中调用$("#form").validate(...);时，它实际上是new了一个$.validator的对象，并且对submit绑定了事件。重点即将来临，在我们创建validator时，它会调用init方法。啰嗦一下，在javascript创建对象new $.validator()时，首先会创建一个空的object，然后会将object的__proto__指向validator的prototype，拥有它的属性与方法,最后执行一遍validator().我们来看init.

init:function(){    ...    function delegate(event){...}    $(this.currentForm).on("focusin.validate focusout.validate keyup.validate",...,delegate).on("click.validate",...delegate);}

这里对form的focus与click事件进行了监听。
至此再对照源码走读一遍，整个jquery validation的代码就比较清晰了。有兴趣还可以对valid方法进行分析。