jQuery validata插件实现方法

2024-02-18 01:18:03 267

大家好，第一次写有点正规的博客，以前都是随手复制几下。为了打LOL,我写快点，代码我都复制在最下面了，并且写了大量的注释。

首先我写jquery插件，喜欢这么写（好处有很多，以后在讲，哈哈，看过jQuery源码应该知道）：

(function(root,factory,plug,undefined){

factory(root.jQuery,plug)

})(window,function($,plug){

/*

在这里写逻辑

一：默认的参数var__dEFAULTS__，

二：规则（可根据业务需求自己配置）var__RULES__，

三：原型var__PROTOTYPE__，

_init:初始化DOM结构，没什么将的,

_attachEvent:自定义的事件的机制（其实就是用了jquery的trigger）

_bind:首先是事件功能的绑定，为每一个input都绑定事件,each循环__RULES__（就是规则），找到所以自定义data的值（也就是每一个input中所需要的规则校验），用if来判断，当前的input中配置了几个data属性，并且通过rule.call(_$field)（这句话的意思就是调用rule函数的时候，rule函数里的this引用变成了_$field），把input中的rule规则判断一下。如果为false，那么就在input的父元素下面添加一个p标签，那么怎么让p标签中的内容让用户来配置呢？"+(_$field.data(key+"-message")||_$this.errorMessage)+"

，这其中的意思是如果错了，那么就不往下检索rule了，直接returnresult（因为rule返回为false,所以这里的result也为false），来阻止。并且添加p标签，并且根据result的值来判断input的父元素,来个父元素加上一个success或error。最后还有submit方法：这个方法是用来通过input父元素的class中有没有error，来判断触发哪一个自定义事件

四：$.fn[plug]

一：首先判断当前元素是否是from标签，不是的话，throw一个错误

二：$.extend(this,__dEFAULTS__,options,__PROTOTYPE__);(....貌似有同学面试死在这个上面了，有空讲一下吧)

三：this._init();this._bind();returnthis;

五：根据业务需求，用户自定义添加rule：就是如下添加一个方法，就可以了，（下次有时间还是讲一下extend吧）

$.fn[plug].extendRules=function(news){
$.extend(__RULES__,news);
}

六：ajax

functionlogin(){
varusername=$('#username').val(),
password=$('#password').val();
vardata={
"uname":username,
"upwd":password
};
$.ajax({
url:'/login',
type:'POST',
data:data,
success:function(data,status){
if(status=='success'){
location.href='home';
}
},
error:function(data,status){
if(status=="error"){
location.href='login'
}
}
});
}

JS：

;
(function(root,factory,plug,undefined){
factory(root.jQuery,plug);
})(window,function($,plug){
//默认参数
var__dEFAULTS__={
triggerEvent:"keyup",
errorMessage:"Youenteredawrong"
};
/*
require(需求)必填项
regex（正则表达式）正则验证
length长度验证
minlength最短的长度
maxlength最长的长度
between两者之间的长度
equalto和xxx相同
greaterThan大于
lessThan小于
middle两者之间的数字
integer整数
number必须是数字
email邮箱地址
mobile电话号码
phone手机号码
uri有效的统一资源标识符
cardId身份证号码
bankId银行卡号码
....其他的规则（根据业务规则来）
*/
var__RULES__={
require:function(){
returnthis.val()!="";
},//(需求)必填项
regex:function(){
returnnewRegExp(this.data("regex")).test(this.val());
},//（正则表达式）正则验证
length:function(){
returnthis.val().length==Number(this.data("length"));
},//长度验证
minlength:function(){
returnthis.val().length>=Number(this.data("minlength"));
},//最短的长度
maxlength:function(){
returnthis.val().length<=Number(this.data("maxlength"));
},//最长的长度
between:function(){
varlength=this.val().length;
varbetween=this.data("between").split("-");
returnlength>=Number(between[0])&&length<=Number(between[1]);
},//两者之间的长度
equalto:function(){
if($(this.data("equalto")).val()===this.val()){
$(this.data("equalto")).parent(".mf-line").removeClass('error').addClass('success').next("p").remove();
returntrue;
}
returnfalse;
},//和xxx相同
greaterthan:function(){
returnthis.val()>Number(this.data("greaterthan"));
},//大于
lessthan:function(){
returnthis.val()=Number(middle[0])&&length<=Number(middle[1]);
},//两者之间的数字
integer:function(){
return/^\-?[0-9]*[1-9][0-9]*$/.test(this.val());
},//整数
number:function(){
return!isNaN(Number(this.val()));
},//必须是数字
email:function(){
return/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this.val());
},//邮箱地址
mobile:function(){
return/^1\d{10}$/.test(this.val());
},//电话号码
phone:function(){
return/^\d{4}\-\d{8}$/.test(this.val());
},//手机号码
uri:function(){
return/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g.test(this.val());
},//有效的统一资源标识符
amount:function(){//金额
if(!this.val())returntrue;
return/^([1-9][\d]{0,}|0)(\.[\d]{1,2})?$/.test(this.val());
}
};
var__PROTOTYPE__={
//初始化dom结构
_init:function(){
this.$fields=this.find(".mf-line.mf-txt:visible");//选择可见的input(过滤掉display:none)
},
//自定义事件的触发机制
_attachEvent:function(event,args){
this.trigger(event,args);
},
//事件
_bind:function(){
var_$this=this;
//事件功能绑定
this.$fields.on(this.triggerEvent,function(){
var_$field=$(this);//需要验证的表单
var$group=_$field.parents(".mf-line");//拿到input的div
varresult=true;
$group.next("p").remove();
$.each(__RULES__,function(key,rule){
if(_$field.data(key)){
result=rule.call(_$field);
(!result)&&$group.after(""+(_$field.data(key+"-message")||_$this.errorMessage)+"");
returnresult;
}
})
$group.removeClass('errorsuccess').addClass(result?'success':'error');
})
this.on("submit",function(){
var$groups=_$this.$fields.trigger(_$this.triggerEvent).parents(".mf-line");
if($groups.filter(".error").length>0){
_$this._attachEvent("error",{});
}else{
_$this._attachEvent("success",{});
}
returnfalse;
})
}
}
$.fn[plug]=function(options){
//判断this是否是form标签
if(!this.is("form")){
thrownewError("thetrggerisnotformtag");
}
$.fn.extend(this,__dEFAULTS__,options,__PROTOTYPE__);
this._init();
this._bind();
returnthis;
}
$.fn[plug].extendRules=function(news){//根据业务需求增加rule
$.extend(__RULES__,news);
}
},"validator");



//这是调用插件的js

$(function(){
$.fn.validator.extendRules({
cardid:function(){
return/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.val());
}
})
$(".member-forms").validator({
triggerEvent:"blur"
})
.on("error",function(event,$errFiles){
returnfalse;
})
.on("success",function(event){
this.submit();
returnfalse;
});
});

HTML：






validata







用户登录

帐号：

密码：

jQuery validata插件实现方法

热门推荐

随机推荐