jQuery的表单验证插件

txf2004

浏览: 7041991 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 正则表达式 Google JavaScript C#

在页面加载完成之后使用下面语句绑定
$("#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]+$"}

R 一个正则表达式，使用（””）双引号括起来。

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>

打包下载：http://files.cnblogs.com/snryang/FV.rar