鄙人最新作JS验证组件采用策略模式易扩展

// JavaScript Document var checkObj={/**数据验证类**/ checkFunc:{},//验证数据的函数对象集合 errorMessage:[],//错误消息 rightMessage:[],//正确消息 showInfoFunc:{},//显示消息的函数 checkConfig:{},//验证配置 check:function(data){//验证 var i, msg, checkType, checker, result_ok; for(i in data){ /*if(data[i].hasOwnProperty(i)){*/ checkType=this.checkConfig[i];//获得相应的验证规则函数名称 checker=this.checkFunc[checkType];//获得相应的验证函数 if(!checkType){; continue;//若验证规则不存在则不做任何处理跳出当前遍历进行下一步遍历 } if(!checker){ throw new Error('请指定'+checkType+'验证函数');//若验证函数不存在，抛出异常 } //}//hasOwnProperty result_ok=checker.validate(data[i]);//对单个进行验证 if(!result_ok){ //alert(data[i]+'错误'); this.errorMessage[i]=i+checker.instructions; if(this.showInfoFunc[i]){//如果定义的显示状态的函数，则调用该函数 //alert('有函数'); this.showInfoFunc[i](this.errorMessage[i]); } }else{ //alert(data[i]+'正确'); this.rightMessage[i]=i+'填写正确'; if(this.showInfoFunc[i]){//如果定义的显示状态的函数，则调用该函数 //alert(this.showInfoFunc[data[i]]); this.showInfoFunc[i](this.rightMessage[i]); } } }//for in },//check hasErrors:function(){//检查是否有错误 var _count=0; for(var i in this.errorMessage){ _count+=1; } return _count!==0; } } /*******检查是否为空*******/ checkObj.checkFunc.isEmpty={ validate:function(val){ return val!=''; }, instructions:'传入的值不能为空！'//错误消息 } /*******检查是否选择非默认值******/ checkObj.checkFunc.isDefault={ validate:function(val){ var _default='default'; return val!=_default; }, instructions:'请选择值！'//错误消息 } /*****检查电子邮件*****/ checkObj.checkFunc.isEmail={ validate:function(val){ var _reg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; return _reg.test(val); }, instructions:'请填写正确的格式！'//错误消息 } /******检查是否选择项目**********/ checkObj.checkFunc.isChecked={ validate:function(val){ return val; }, instructions:'未选择值!'//错误消息 }

调用方式如下

var data={ fullName:$('.content').find('#fullNameTr').find('input').val(), tel:$('.content').find('#telTr').find('input').val(), email:$('.content').find('#emailTr').find('input').val(), address:$('.content').find('#addressTr').find('input').val(), send:$('.content').find('#sendTr').find('span[id=sendWay]').children('input:checked').attr('rel'), sendArea:$('.content').find('#countryTr').find('select[name=district]').val() } /*************配置***************/ checkObj.checkConfig={ fullName:'isEmpty', tel:'isEmpty', email:'isEmail', address:'isEmpty', send:'isChecked', sendArea:'isDefault' } /*************t提示函数************/ checkObj.showInfoFunc={ fullName:function(msg){ $('.content').find('#fullNameTr').find('span[class=showInfo]').html('<b class="red">'+msg+'</b>'); }, tel:function(msg){ $('.content').find('#telTr').find('span[class=showInfo]').html('<b class="red">'+msg+'</b>'); }, email:function(msg){ $('.content').find('#emailTr').find('span[class=showInfo]').html('<b class="red">'+msg+'</b>'); }, address:function(msg){ $('.content').find('#addressTr').find('span[class=showInfo]').html('<b class="red">'+msg+'</b>'); }, send:function(msg){ $('.content').find('#sendTr').find('span[class=showInfo]').html('<b class="red">'+msg+'</b>'); }, sendArea:function(msg){ $('.content').find('#countryTr').find('span[class=showInfo]').html('<b class="red">'+msg+'</b>'); } } /**************调用检查***************/ checkObj.check(data); /*************确认是否有错误*************/ //alert(checkObj.rightMessage.lengths); if(checkObj.hasErrors()){ alert('有错误'); }