您的位置:首页 > Web前端 > JQuery

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

2011-08-19 09:40 986 查看
以前做表单验证的时候,都是临时写的,次数多了,人就烦了,所以就自己写了一个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
= {s: false, v: ''};
}
o(n).focus(function() {
p.focus(this, (p.rules
.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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: