jQuery validata插件实现方法
大家好,第一次写有点正规的博客,以前都是随手复制几下。为了打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标签中的内容让用户来配置呢?
四:$.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 用户登录