JS验证组件采用策略模式 易扩展
[javascript]
// 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:'未选择值!'//错误消息
}
调用方式如下 www.2cto.com
[javascript]
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('有错误');
}
摘自 PainsOnline的专栏
