现在的位置: 首页 > 综合 > 正文

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

2013年06月16日 ⁄ 综合 ⁄ 共 3161字 ⁄ 字号 评论关闭
// 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('有错误');
				}

抱歉!评论已关闭.