本文介绍了一个基于jQuery的表单验证插件，该插件提供了丰富的验证方式，包括输入验证、相等验证、正则表达式验证及自定义函数验证。通过简单的API调用即可实现复杂的表单验证逻辑。
基于jQuery的表单验证插件
参考了http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html的一些东西，根据实际项目需要写的一个验证插件
API 调用说明
在页面加载完成之后使用下面语句绑定
$("#test1").FV({
group : "1",
msg : "用户名只能为字母，长度为6-10位",
empty : true,
valid : [ {T:"I",P:{min:6,max:10}},
{T:"R",P:"^[A-Za-z]+$"}
]
});
group: 表示分组，可以省略.
可以简写为 G
msg: 表示错误提示信息,可以省略，默认为””
可以简写为 M
empty: 表示可否为空，可以省略，默认为false
可以简写为 E
valid : 表示要执行的验证方式，可以为了一个对象，如果要执行多种方式的验证，则为一个数组对象。
可以简写为 V
valid 介绍
验证方式有四种
“I”输入验证
{T:"I",P:{T:"N",min:1,max:120}}
T 表示验证类型
P 表示验证的参数
T 表示验证的方式数字范围或字符串长度验证(N/S) ，可以省略，默认为”S” 字符串长度验证
min 默认为0
max 默认为1000
“C”相等验证
{T:"C",P:"password1"}
P 表单控件的ID
“R”正则表达式验证
{T:"R",P:{R: "^[A-Za-z]+$",I:flase}}
{T:"R",P:/^[A-Za-z]+$/}
P 一个正则表达式对象，如果是一个字符串正则表达式，如："^-?[1-9]\\d*$" 请注意里面的 \ 应该换为 \\
I 表示是否区分大小写，默认为 flase
第一种方式与第二种方式功能一样。
“F”自字义函数验证
{T:"F",P:isDate}
P 函数的名称，函数接收的第一个参数为当前input的值
原码：
Code
/*
基于jQuery的表单验证插件
author : Snryang
Date : 2008-10-24 10:28:00
blog : http://snryang.cnblogs.com
*/
jQuery.formValidator = {
ids:[],
init: function (o){
if (!o) return ;
return this.each(
function (){
var el = this;
var jel = jQuery(this);
this.fvCfg = {
jel: jel,
imgId: el.id + "error",
group: (o.group || o.G) ? o.group : "",
msg: o.msg || o.M || "",
empty: o.empty || o.E || false,
V: o.V || o.valid || null
};
jel.after("<img src='reg3.gif' id='"+el.fvCfg.imgId+"' title='"+el.fvCfg.msg+"' style='display:none'/>");
jel.bind('blur', jQuery.formValidator.start);
jQuery.formValidator.ids.push(el);
}
);
},
start: function(){
if(this.fvCfg.V == null) return;
var flag = true;
if(this.fvCfg.V.constructor == Object){
this.fvCfg.P = this.fvCfg.V.P;
flag = eval("jQuery.formValidator." + this.fvCfg.V.T + ".apply(this)");
}
else if(this.fvCfg.V.constructor == Array){
for(var i in this.fvCfg.V){
this.fvCfg.P = this.fvCfg.V[i].P
flag = eval("jQuery.formValidator." + this.fvCfg.V[i].T + ".apply(this)");
if (!flag) break;
}
}
flag = !flag ? (this.fvCfg.empty ? (this.fvCfg.jel.val() == "" ? true : false) :false ) : true;
flag ? jQuery("#" + this.fvCfg.imgId).hide() : jQuery("#" + this.fvCfg.imgId).show();
return flag;
},
I: function(){
var P = this.fvCfg.P;
var T = P.type || P.T || "S";
var min = P.min || 0;
var max = P.max || 1000;
var value = this.fvCfg.jel.val();
if(T.toUpperCase() == "N") {
if( this.fvCfg.msg == "" ) jQuery("#" + this.fvCfg.imgId).attr("title","数字应当大于等于[ "+min+" ]并且小于等于[ "+max+" ]");
return (Number(value) >= min && Number(value) <= max) ? true : false;
}
else {
if( this.fvCfg.msg == "" ) jQuery("#" + this.fvCfg.imgId).attr("title","字符串长度应当大于等于[ "+min+" ]并且小于等于[ "+max+" ]");
return (value.length >= min && value.length <= max) ? true : false;
}
},
C: function(){
var id = this.fvCfg.P;
var value = this.fvCfg.jel.val();
return jQuery("#" + id).val() == value ? true : false;
},
R: function(){
var P = this.fvCfg.P;
var regexp = (P.constructor != Object) ? P : P.regexp || P.R;
var I = P.I || false;
var value = this.fvCfg.jel.val();
var re = I ? new RegExp(regexp) : new RegExp(regexp,"i") ;
return re.test(value);
},
F: function(){
return (this.fvCfg.P.constructor == Function) ? this.fvCfg.P.apply(this,[this.fvCfg.jel.val()]) : false;
},
PageIsValid: function(group){
var valid = true;
var G = group || "";
var flag;
jQuery.each(jQuery.formValidator.ids,function(i,e){
if(G == e.fvCfg.group || G =="") {
flag = jQuery.formValidator.start.apply(e);
if(!flag) valid = false;
}
});
return valid;
}
};
jQuery.fn.extend(
{
FV : jQuery.formValidator.init,
PageIsValid : jQuery.formValidator.PageIsValid
}
);
测试html
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script src="jquery-1.2.3-intellisense.js" type="text/javascript"></script>
<script src="Snryang.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test1").FV({
group : "1",
M : "用户名只能为字母，长度为6-10位",
V : [ {T:"I",P:{min:6,max:10}},
{T:"R",P:"^[A-Za-z]+$"}
]
});
$("#password1").FV({
V : {T:"I",P:{min:6,max:10}}
});
$("#password2").FV({
msg : "重复密码长度为6-10位，只能为字母，必须与密码一致",
V : [ {T:"I",P:{min:6,max:10}},
{T:"C",P:"password1"},
{T:"R",P: regexEnum.letter}
]
});
$("#nl").FV({
V : {T:"I",P:{T:"N",min:1,max:120}}
});
$("#csny").FV({
G : "1",
M : "出生日期格式：yyyy-MM-dd",
E : true,
V : {T:"F",P:isDate}
});
$("#dxzm").FV({
msg : "这只能输入大写字母，可以为空",
empty : true,
V : {T:"R",P:{R:regexEnum.letter_u,I:true}}
});
});
function pageValid(){
alert($().PageIsValid());
alert($().PageIsValid("1"));
}
function isDate(str)
{
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if(r==null)return false;
var d= new Date(r[1], r[3]-1, r[4]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}
</script>
</head>
<body>
<table >
<tr>
<td align="right">用户名:</td>
<td><input type="text" id="test1" /></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" id="password1" /></td>
</tr>
<tr>
<td align="right">重复密码:</td>
<td><input type="password" id="password2" /></td>
</tr>
<tr>
<td align="right">你的性别:</td>
<td><input type="radio" id="sex" value="1" name="sex" />
男 <input type="radio" id="sex1" value="2" name="sex" />
女</td>
</tr>
<tr>
<td align="right">你的年龄:</td>
<td><input type="text" id="nl" value="26" /></td>
</tr>
<tr>
<td align="right">出生日期:</td>
<td><input type="text" id="csny" /></td>
</tr>
<tr>
<td align="right">大写字母：</td>
<td><input type="text" id="dxzm" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="button" id="button" onclick="pageValid()" value="提交" /></td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
