怎么自定义一个javascript验证框架
怎么自定义一个javascript验证框架?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
1. 验证框架主要采用 jquery异步对象去扩展的,也就是jquery defered 的用法,这样去做验证的好处是,即使某些验证是采用ajax 方式去验证的,结合jquery when 函数,一样可以批量校验. 主要代码如下:
functionValidator(errorHandle){ this.errorHandle=errorHandle; this.elements=["input","select","textarea"]; } Validator.prototype={ contructor:Validator, rules:{}, addRules:function(ruleName,validFunction,errorFunction){ this.rules[ruleName]={ validFunction:validFunction, errorFunction:errorFunction }; }, eventFunction:function(item){ varself=this; $(item).die().live("blur",function(){ self.validateItem(item); }); }, bindingEvent:function(divId){ varself=this; self.elements.forEach(function(element){ $("#"+divId).find(element).each(function(i,item){ self.eventFunction(item); }); }); }, validateDiv:function(divId){ vardtdList=[], self=this; self.elements.forEach(function(element){ $("#"+divId).find(element).each(function(i,item){ dtdList.push(self.validateItem(item)); }); }); self.elements.forEach(function(element){ if($("#"+divId).find(element).length==0){ vardeferred=$.Deferred(); deferred.resolve(); dtdList.push(deferred); } }); return$.when.apply(null,dtdList).fail(function(){ if(self.errorHandle){ self.errorHandle.call(null,divId); } }); }, validateItem:function(d){ varself=this; varruleList=[]; for(varrinthis.rules){ if($(d).is("["+r+"]")){ ruleList.push(r); } } vardtd=$.Deferred(); varchecked=function(){ if(ruleList.length>=1){ varok=self.validate(d,ruleList[0]); ok.done(function(){ if(ruleList.length>=2){ self.validate(d,ruleList[1]); } ruleList.shift(); checked(); }).fail(function(){ dtd.reject(); }); }else{ dtd.resolve(); }; //dtd.resolve(); //returndtd; }; checked(); returndtd; }, validate:function(d,rule){ varvalue=$(d).val(), attributeValue=$(d).attr(rule), f=this.rules[rule].validFunction, self=this; varok=f.call(null,d,value,attributeValue); returnok.fail(function(item){ if($(item).siblings("[validationError]").length!=0){ $(item).siblings("[validationError]").remove(); } if(self.rules[rule].errorFunction){ self.rules[rule].errorFunction(d,rule); }else{ self.showErrorMessage(d,rule); } }).done(function(item){ if($(item).siblings("[validationError]").length!=0){ $(item).siblings("[validationError]").remove(); } }); }, validationByRegx:function(d,value,regx){ vardtd=$.Deferred(), ok=regx.test(value); if(ok||$.trim(value)===""){ dtd.resolve(d); }else{ dtd.reject(d); } returndtd.promise(); }, /*默认的出错处理方法*/ showErrorMessage:function(item,rule){ varmsgInfo=getJSLocale($(item).attr("msgid")); varruleInfo=getJSLocale("msg_"+rule); if($(item).siblings("span").find("[msgid='msg_"+rule+"']").length==0){ varmessage=msgInfo||ruleInfo; $(item).parent().append("<spanvalidationError><labelmsgid='msg_"+rule+"'>"+message+"</label></span>"); } } }; //adddefaultrule Validator.prototype.addRules("required",function(d,value,attributeValue){ vardtd=$.Deferred(); varok=!($.trim(value)==""||value==null); if(ok){ dtd.resolve(d); }else{ dtd.reject(d); } returndtd.promise(); }); Validator.prototype.addRules("maxLen",function(d,value,attributeValue){ vardtd=$.Deferred(); varok=(value.length<=attributeValue); if(ok){ dtd.resolve(d); }else{ dtd.reject(d,attributeValue); } returndtd.promise(); },function(d,rule){ if($(d).siblings("span").find("[msgid='msg_"+rule+"']").length==0){ varattributeValue=$(d).attr(rule); varmsgInfo=getJSLocale($(d).attr("msgid"),{length:attributeValue}); varruleInfo=getJSLocale("msg_"+rule,{length:attributeValue}); varmessage=msgInfo||ruleInfo; $(d).parent().append("<spanvalidationError><labelmsgid='msg_"+rule+"'errorMsgParam='"+attributeValue+"'>"+message+"</label></span>"); } }); Validator.prototype.addRules("minLen",function(d,value,attributeValue){ vardtd=$.Deferred(); varok=(value.length>=attributeValue); if(ok){ dtd.resolve(d); }else{ dtd.reject(d,attributeValue); } returndtd.promise(); },function(d,rule){ if($(d).siblings("span").find("[msgid='msg_"+rule+"']").length==0){ varattributeValue=$(d).attr(rule); varmsgInfo=getJSLocale($(d).attr("msgid"),{length:attributeValue}); varruleInfo=getJSLocale("msg_"+rule,{length:attributeValue}); varmessage=msgInfo||ruleInfo; $(d).parent().append("<spanvalidationError><labelmsgid='msg_"+rule+"'errorMsgParam='"+attributeValue+"'>"+message+"</label></span>"); } }); Validator.prototype.addRules("url",function(d,value,attributeValue){ returnValidator.prototype.validationByRegx(d,value,/^(((ht|f)tp(s?))\:\/\/)[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/i); }); Validator.prototype.addRules("email",function(d,value,attributeValue){ returnValidator.prototype.validationByRegx(d,value,/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/); }); Validator.prototype.addRules("english",function(d,value,attributeValue){ returnValidator.prototype.validationByRegx(d,value,/^[a-zA-Z0-9_\-]+$/); });
对于html 页面的验证方式呢,采用如下方式:
<div><h2>自定义验证框架测试</h2></div> <div> <divid="required_valid_div"> <inputtype="text"requiredminLen="3"maxLen="5"/><p/> english:<inputtype="text"requiredenglishmaxLen="50"/><p/> <inputtype="text"requiredmaxLen="50"/><p/> <inputtype="text"urlrequired/><p/> email:<inputtype="text"email/><p/> <selectrequired> <optionvalue="">请选择</option> <optionvalue="1">中国</option> </select> <p/> <textarearequiredmaxLeng="500"></textarea><p/> 自定义错误信息:<inputtype="text"urlrequiredmsgid="myUrlError"/><p/> </div> <buttononclick="javascript:validatorDiv();">验证</button> <buttononclick="javascript:loadI18nCN();">Load中文国际化</button> <buttononclick="javascript:loadI18NEN();">LoadEnglishi18N</button> </div>
其中有很多自定义的属性,比如required,maxLen, url,email 等。 当然部分与HTML5的有冲突,也不矛盾。如果不想冲突,当然可以另外定义,但要注意validation.js 要同步修改,还有i18n 国际化文件. 在这里面我自定义了一个 自定义错误信息,如果有msgid 属性的会去找msgid 对应的国际化消息,否则会去找rule_加上自定义属性的消息. 这是为了自己的项目定制的。
js 国际化的支持
varJSLocale={ msg_required:"不能为空", msg_maxLen:"最大长度{{:length}}.", msg_minLen:"最小长度{{:length}}.", msg_url:"不合法的网址", msg_email:"Email不合法", msg_english:"只允许输入0-9,a-z,A-Z", myUrlError:"自定义错误提示:url不合法哦", end:"" };
测试效果
看完上述内容,你们掌握怎么自定义一个javascript验证框架的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注恰卡编程网行业资讯频道,感谢各位的阅读!
推荐阅读
-
JavaScript闭包用多会造成内存泄露吗
-
javascript中文乱码如何解决
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
PHP与Node.js:一个史诗般开发者的分享
-
JavaScript 中 find() 和 filter() 方法的区别
JavaScript在ES6上有很多数组方法,每种方法都有独特的用途和好处。在开发应用程序时,大多使用数组方法来获...
-
js怎么跟php结合使用
-
简单说说Node.js和JavaScript
Node.js是一个开源和跨平台的JavaScript运行时环境,在浏览器之外运行V8JavaScript引擎(...
-
前端开发工程师专业技能简历范文
-
JavaScript怎么实现淘宝网图片的局部放大功能