基于jquery的表单验证插件,有兴趣请来指点一二

以前做表单验证的时候,都是临时写的,次数多了,人就烦了,所以就自己写了一个formValidator,虽然没有网上很多验证程序功能强大,全面。

但也是在工作中根椐实际情况产生的,还是比较实用的。下面是代码,有兴趣的朋友自己看,欢迎指点。。。


/**********************/
/* formValidator
/* danica 2011-04-16
/*********************/
(function($) {
	/*****************************************************************************************/
	/*	check form elements
	/*	example: 
	/*	[html]	
	/*		<input type='text' name='userName' /><span class='tip'></span>
	/*		<input type='password' name='pwd' /><span class='tip'></span>
	/*		<input type='button' id='submitBtn' value='update' />
	/*	[javascript]	
	/*		$('#submitBtn').formValidator(
	/*			tag: 'name',  //设定获取表单元素的属性名称
	/*			rules: {
	/*				'userName': {
	/*					request: true,	不能为空
	/*					hide: true|[false|undefined|null|0],	不可见时是否验证(visibility|display)
	/*					maxLen: 30,		最大长度
	/*					minLen: 6,		最小长度
	/*					valueTo: '1',	与valueTo表示的字符串相同
	/*					valueToMsg: '值和valueTo不相同时的提示
	/*					valueOff: '2',	与valueOff表示的字符串不相同
	/*					valueOffMsg: '值和valueOff相同时的提示
	/*					reg: (/\d+/),	要匹配的正则
	/*					regMag: '格式不正确',		正则不匹配的提示					
	/*					matchTo: 'elementAttribute_reg2',	与matchTo表示的element的值相同
	/*					matchToMsg: '与xx的输入不一致',	值不相同时的提示
	/*					radio: 'elementAttribute_reg3,elementAttribute_reg4'
	/*					radioMsg: '以上几项中必填一项,包括当前比较项,此时这几项都要设置为request:false'
	/*					checkbox: 'elementAttribute_reg3,elementAttribute_reg4'
	/*					checkboxMsg: '以上几项填写一项后,其它的都要填写
	/*					fun: function() {}
	/*					funMsg: '函数验证返回false后的信息'
	/*					ajax: null || {msg: 'loading...', smsg: '成功', emsg: '失败', delay: 10, url: 'xxx.xxx'}	是否进行ajax验证
	/*					msg: ''	获取焦点时的提示
	/*				}
	/*				'pwd': {
	/*					request: true
	/*				}
	/*			},
	/*
	/*			element [dom] 被验证的表单元素
	/*			msg [string] 表单元素获取焦点时的提示信息
	/*			focus: function(element, msg) {
	/*				$(element).next('.tip').html(msg);
	/*			},
	/*
	/*			element [dom] 被验证的表单元素
	/*			result [json] {success : 1|0, msg: '验证后的提示信息'}
	/*			tips: function(element, result) {
	/*				$(element).next('.tip').html(result.msg);
	/*			},
	/*
	/*			btn [dom] 提交按钮
	/*			success [number] 所有验证是否己通过
	/*			callBack: function(btn, success) {
	/*				if(success) {
	/*					btn.parents('form').get(0).submit();
	/*				}
	/*			}
	/*		});
	/***************************************************************************************/
	$.fn.formValidator = function(op) {
		var p = $.extend({ajaxList: {}}, $.fn.formValidator.defaultOptions, op);
		$.each(p.rules, function(n, v) {
			if(v.ajax) {
				p.ajaxList[n] = {s: false, v: ''};
			}
			o(n).focus(function() {
				p.focus(this, (p.rules[n].msg || ''));				
			}).blur(function() {
				p.tips(this, check(this, n));				   
			});
		});
		$(this).click(function(e) {
			var s = true;
			var m;
			var t;   
			$.each(p.rules, function(n, v) {
				t = o(n);
				if(t.size()) {
					m = check(t, n);
					p.tips(t, m);
					if(!m.success) {
						s = false;
						return false;
					}
				}
			});
			$.each(p.ajaxList, function(n, v) {
				if(!v.s) {
					s = false;
					return false;
				}											
			});
			if(!s) {
				e.preventDefault();
				e.stopPropagation();					
			}
			p.callBack(this, s);
		});
		
		function check(obj, key) {
			var rule = p.rules[key];
			var element = $(obj);
			var defaultMsg = rule.msg || '';
			if((element.css('visibility') == 'hidden' || element.css('display') == 'none') && !rule.hide) {
				return {success: 1, msg: defaultMsg};
			}
			var v = $.trim(element.val());
			if(v == '') {
				if(rule.request) {
					return {success: 0, msg: rule.requestMsg? rule.requestMsg : '不能为空'};
				} else {
					if(!rule.radio) {
						if(p.ajaxList[key]) {
							p.ajaxList[key].s = true;	
						}
						return {success: 1, msg: defaultMsg};	
					} else {
						var is = 0;
						$.each(rule.radio.split(','), function(i, v) {
							if($.trim(o(v).eq(0).val()) != '') {
								is = 1;
								return false;
							}										  
						});
						return {success: is, msg: (is? defaultMsg : rule.radioMsg)};
					}
				}
			}
			if(rule.reg && !rule.reg.test(v)) {
				return {success: 0, msg: rule.regMsg};					
			}				
			if(rule.valueTo && v != rule.valueTo) {
				return {success: 0, msg: rule.valueToMsg};	
			}
			if(rule.valueOff && v == rule.valueOff) {
				return {success: 0, msg: rule.valueOffMsg};	
			}	
			var l = v.replace(/[^\x00-\xff]/g, 'xx').length;				
			if(rule.maxLen && l > rule.maxLen) {
				return {success: 0, msg: rule.maxLenMsg? rule.maxLenMsg : '长度不能超过' + rule.maxLen + '个字符', len: l};
			}
			if(rule.minLen && l < rule.minLen) {
				return {success: 0, msg: rule.minLenMsg? rule.minLenMsg : '长度不能小于' + rule.minLen + '个字符', len: l};
			}
			if(rule.matchTo) {
				var s = o(rule.matchTo).eq(0).val();
				if(v != s) {
					return {success: 0, msg: rule.matchToMsg};
				}
			}
			if(rule.checkbox) {
				var is2 = 1;
				$.each(rule.checkbox.split(','), function(i, v) {
					if($.trim(o(v).eq(0).val()) == '') {
						is2= 0;
						return false;
					}										  
				});
				return {success: is2, msg: (is2? defaultMsg : rule.checkboxMsg)};					
			}			
			if(rule.fun) {
				var f = rule.fun(element);
				if(!f) {
					return {success: 0, msg: rule.funMsg};	
				}
			}
			if(rule.ajax) {
				if(p.ajaxList[key].v != element.val()) {
					p.ajaxList[key].s = false;
					p.ajaxList[key].v = element.val();
					$.ajax({
						url: rule.ajax.url,
						type: 'POST',
						data: element.attr('name') + '=' + element.val(),
						beforeSend: function() {
							p.tips(element, {success: 1, msg: rule.ajax.msg});	
						},
						success: function(v) {
							if(v) {
								var re = eval('(' + v + ')');
								if(re.success) {
									p.ajaxList[key].s = true;								
									p.tips(element, {success: 1, msg: rule.ajax.smsg});
								} else {
									p.tips(element, {success: 0, msg: (re.msg? re.msg : rule.ajax.emsg)});	
								}
							} else {
								p.tips(element, {success: 0, msg: rule.ajax.emsg});	
							}	
						},
						error: function() {
							p.ajaxList[key].s = true;								
							p.tips(element, {success: 1, msg: ''});							
						}
					});
				} else {
					return {success: 1, msg: rule.ajax.smsg};
				}
			}			
			return {success: 1, msg: defaultMsg};
		}
		
		function o(k) {
			return 	$("[" + p.tag + "='" + k + "']");
		}
	}
	$.fn.formValidator.defaultOptions = {
		tag: 'name',
		rules:{},
		focus: function(element, msg) {},
		tips: function(element, result) {},
		callBack: function(btn, success) {}
	};
})(jQuery);


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值