首页 > 代码库 > 给jquery-validation插件添加控件的验证回调方法

给jquery-validation插件添加控件的验证回调方法

  jquery-validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求,例如:1、内置了很多常用的验证方法;2、可以自定义错误显示信息;3、可以自定义错误显示位置;4、可以自定义验证方法;5、ajax提交验证,等等

  但是有时候,我们在做项目的时候总会遇到一些特殊需求,例如,在单个控件验证结束后,根据验证的成功与否,需要调用一些自己定义的方法,这个需求貌似该插件没有提供(可能有只是我没发现),没办法, 只能看源码(这就是开源的好处啊),通过对源码的分析,找到了一种可以给指定控件添加验证回调函数的方法,虽然需要修改一部分源码,但是丝毫不影响对其之前的使用,该方法可以批量添加多个控件的验证回调函数,添加方式与添加自定义规则、自定义错误信息等类似,在阅读源码的过程中,还发现了如何控制控件验证的事件触发,以及如何解决与My97DatePicker日期插件的冲突等问题,所以建议大家多看源码,有时候会有意外收获哦。

  因此,本文包括三个方面:

  1. 添加控件的验证回调函数
  2. 控制控件验证的事件触发
  3. 解决与My97DatePicker日期插件的冲突问题

     下面我们来一步步分析:

给指定控件添加自定义回调函数

  首先,要添加回调函数必须找到该插件的验证方法。其实在使用该插件的时候,从直观的操作上我们就可以发现,控件验证的触发有多种方式,包括:控件焦点的失去,控件内容的改变(其实是keyup),以及点击提交按钮等,相信大家都知道,这些只是表象。经查看源码,能触发验证的方法有很多,如:validate、form、checkForm和element等,但这依旧是表象,以我们程序员的嗅觉,真正的验证函数肯定只有一个,经过深入勘察,前面每个方法都调用了check方法,在check方法中发现一句话:

var result = $.validator.methods[method].call(this, element.value.replace(/\r/g, ""), element, rule.parameters);

可见,这句代码就是真正调用验证逻辑的地方,因此,我们需要将自定义的验证回调函数,放置在check方法中,修改后的代码如下(黄色部分为添加的代码):

check: function(element) {                element = this.validationTargetFor(this.clean(element));                var rules = $(element).rules();                var dependencyMismatch = false;                for (var method in rules) {                    var rule = { method: method, parameters: rules[method] };                    try {                        var result = $.validator.methods[method].call(this, element.value.replace(/\r/g, ""), element, rule.parameters);                        // if a method indicates that the field is optional and therefore valid,                        // don‘t mark it as valid when there are no other rules                        if (result == "dependency-mismatch") {                            dependencyMismatch = true;                            continue;                        }                        dependencyMismatch = false;                        if (result == "pending") {                            this.toHide = this.toHide.not(this.errorsFor(element));                            return;                        }                        if (!result) {                            this.formatAndAdd(element, rule);
                 //验证失败回调函数  
if (element.id in this.settings.validCallbackForElement) { this.settings.validCallbackForElement[element.id].fail(); }
return false; } } catch (e) { this.settings.debug && window.console && console.log("exception occured when checking element " + element.id + ", check the ‘" + rule.method + "‘ method", e); throw e; } } if (dependencyMismatch) return; if (this.objectLength(rules)) this.successList.push(element);
         //验证成功回调函数
if (element.id in this.settings.validCallbackForElement) { this.settings.validCallbackForElement[element.id].success(); }
return true; },

 在这里,为了和插件的其他自定义属性保持一致,我们定义了一个对象,结构如下:

validCallbackForElement:{  yourControlId1:{       success:function(){                 //验证成功回调           },           fail:function(){                //验证失败回调           }      },    yourControlId2:{       success:function(){                 //验证成功回调           },           fail:function(){                //验证失败回调           }      },}        

然后将其放入validate方法的参数中,示例如下(修改的时候将"yourControlId1"和"yourControlId2"更换成你自己的控件id):

$("#form1").validate({                rules: {                    yourControlId1: {                        required: true                    },                    yourControlId2: {                        required: true,                        maxlength: 500                    }                }, //end rule                messages: {                    yourControlId1: {                        required: "不能为空"                    },                    yourControlId2: {                        required: "不能为空",                        maxlength: "内容过长"                    }                },                errorPlacement: function(error, element) {                    if (element.context.name == "yourControlId1") {                        error.appendTo(document.getElementById("yourControlId1_error"));                    }                    else if (element.context.name == "yourControlId2")                        error.appendTo(document.getElementById("yourControlId2_error"));                },                submitHandler: function(form) {                    ajaxSubmit();                },                validCallbackForElement: {                    yourControlId1: {                        success: function() {                            //控件yourControlId1的验证成功回调                        },                        fail: function() {                            //控件yourControlId1的验证失败回调                        }                    },                    yourControlId2: {                        success: function() {                            //控件yourControlId2的验证成功回调                        },                        fail: function() {                            //控件yourControlId2的验证失败回调                        }                    }                }            }); //end validate function

在构造函数中,会将validCallbackForElement对象合并多this.settings对象中,因此,在调用的时候需要写成:this.settings.validCallbackForElement[element.id].success();

因为我们不一定给所有的验证控件都添加回调函数,因此,在调用的时候需要首先判断该控件有没有对应的毁掉函数,这样,调用代码就改为:

if (element.id in this.settings.validCallbackForElement) {     this.settings.validCallbackForElement[element.id].fail();}

到这里,如何给指定控件添加自定义验证回调函数的问题就已经解决了。

验证触发问题:

在使用jquery-validation的时候发现,在调用验证方法之前,控件的keyup和focusout事件是不能触发验证的,比如我们打开一个页面,先不点击提交按钮,这样就不对表单进行过验证,这时候我们把光标放在input控件上,然后什么也不写,在让该input失去焦点,此时我们会发现,并没有提示该input是必填项的错误信息,原因在于,jquery-validation插件在验证表单的时候会将错误信息保存在errorMap这个变量中,errorMap的结构如下:

errorMap{     yourControlId1:"必填项",     yourControlId2:"内容过长",     ......}

然后将errorMap合并到this.submited对象中,在focusout和keyup事件中,会判断this.submited中是否有该控件的id,如果有才会执行验证,代码如下:

onfocusout: function(element, event) {
if (!that.checkable(element) && (element.name in that.submitted || !that.optional(element))) {
that.element(element);
}
},
onkeyup: function(element, event) {
    if (element.name in this.submitted || element == this.lastElement) { 
this.element(element);
}
},

因此,在执行表单验证后才会激活控件的focusout和keyup验证,如果你想一开始就能使focusout和keyup触发验证,可以在这里去掉红色部分的代码。

与My97DatePicker日期控件的冲突问题:

     相信My97DatePicker是很多人都用过的一个日期控件,该控件会与jquery-validation插件冲突,导致jquery-validation插件的focusout事件无法触发验证,可能是因为这两个东西都注册了focusout事件,所以导致了冲突,本来想看看My97DatePicker的源码,打开之后发现是压缩版的,好像是进行了混淆,所以如果在页面中同时使用了这两个东西的话,只能修改jquery-validation了,可以进行如下修改:

onfocusout: function(element, event) {                //修改了此处代码,否则会与My97DatePicker冲突,导致失去焦点的时候不会验证                var that = this;                setTimeout(function() {                    if (!that.checkable(element) && (element.name in that.submitted || !that.optional(element))) {                        that.element(element);                    }                }, 100);            },

给jquery-validation插件添加控件的验证回调方法