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;
};