基于jQuery的表单验证
2008-10-24 11:30
381 查看
基于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
<!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
参考了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
<!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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于JQUERY的表单验证插件.原作者@…
- 一款基于jQuery的带Tooltip表单验证的注册表单
- 基于Jquery的表单验证插件与日历插件
- 基于Jquery的一个表单验证控件
- jQuery基于正则表达式的表单验证功能示例
- 基于jQuery的表单验证插件Validation Engine
- 基于Jquery的轻量级的表单验证
- 基于jquery的form表单验证
- 一款基于jQuery的带Tooltip表单验证的注册表单
- 基于jquery的，简单的php 表单验证组件
- 基于jquery 表单验证插件Validation的应用
- 基于jQuery的表单验证插件：jValidate
- 基于jQuery实现表单提交验证
- (转载)jQuery html5Validate基于HTML5表单验证插件
- 【表单验证】基于jQuery的高度灵活的表单验证（无UI）
- 基于jQuery的Validate表单验证
- 基于Jquery的表单验证框架
- 基于jQuery的表单验证插件：jValidate
- 基于jquery表单验证
- 自定义基于jQuery的客户端表单验证工具