JQuery validation源码解析

最新推荐文章于 2022-03-30 14:29:26 发布

原创最新推荐文章于 2022-03-30 14:29:26 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

DHTML 专栏收录该内容

5 篇文章

订阅专栏

本文主要探讨了如何解决umeditor富文本编辑器与jquery validation的冲突，并详细解析了jquery validation的源码结构，包括其总体部分、关键扩展方法以及入口点。通过分析validate方法的初始化过程，揭示了焦点和点击事件的监听机制，帮助理解jquery validation的工作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.解析目的
解决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方法进行分析。