jQuery.validator详解二

1.插件结构(组织方式)

var plugFn=function($){

　　$.extend($.fn,{

　　　　//验证form表单

　　　　validate:function(options){

　　　　　　//实例化$.validator对象

　　　　　　var validator=new $.validator(options,this[0]);

　　　　　　this.onsubmit(function(){

　　　　　　　　if(validator.form()){

　　　　　　　　　　return true;

　　　　　　　　}

　　　　　　　　return false;

　　　　　　});

　　　　},

　　　　//获取元素的验证规则，需要逐一验证

　　　　rules:function(command,argument){

　　　　　　//...

　　　　}

　　});

　　//构造函数

　　$.validator=function(options,form){

　　　　this.settings=$.extend(true,{},$.validator.defaults,options);

　　　　this.currentForm=form;

　　　　this.init();

　　};

　　$.extend($.validator,{

　　　　defaults:{},

　　　　setDefaults:function(settings){},

　　　　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;

　　　　　　}

　　　　}

　　});

}

 

//为了兼容requiredjs,将代码包装如下：

(function(factory){

　　if(typeof define ==="function" && defineamd){

　　　　define(["jquery"],factory);

　　}else{

　　　　　　factory(jQuery);

　　　　}

}(plugFn));

 

2.如何对表单元素验证：

验证的触发方式：

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

2.当触发focusout事件，且表单元素value不为空，则会对事件目标元素进行验证

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

如何验证：

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

$(ele).rules();

validator.check(ele);

 

3.配置对象

{

　　errorClass:"error",         //消息错误提示容器，验证未通过的表单元素的 classaName

　　validClass:"valid",

　　errorElement:"label",

　　...

　};

}

 //自定义你的错误消息提示：

$.validator.messages={

　　required:"输入不能为空",

　　remote:"用户名已经存在"，

　　email:"请输入一个有效的电子邮件地址"，

　　...

　　}

直接看代码吧！

$.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;

};

 

转载于:https://www.cnblogs.com/csli/p/6762388.html