首先非常感谢网友大白的无私分享，此Jquery插件是他的一款原创FormValidator表单验证插件，默认带了11个验证Demo，如有什么不明白之处可以看使用帮助文档，jQuery.FormValidator.chm也一起打包在作品里面了，里面有详细介绍每个功能的用法。
包含了以下验证功能：
1、控件值不能为空
2、控件值长度限制
3、选中项数量限制
4、控件值范围限制
5、控件值类型限制
6、控件值格式化
7、两个控件值比较
8、自定义验证方法
9、下拉必选
10、表单验证方式
11、控件独自验证
看一个简单的表单用户名验证插件
| 代码如下 | 复制代码 |
<!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>基于Jquery的FormValidator表单验证插件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="Images/css.css" rel="Stylesheet" />
<script type="text/javascript" src="Scripts/jquery1.2.6.js"></script>
<script type="text/javascript" src="Scripts/jQuery.FormValidator.js"></script>
</head>
<body> <h5>控件值不能为空</h5>
<h6>示例1：</h6>
<fieldset>
<legend>验证之前，除去控件值首尾空格。</legend>
<form id="FormDemo01_0" action="Demo.01.htm" method="post">
<dl style="vertical-align:middle;">
<dt>用户名：</dt>
<dd><input type="text" id="UserName0" name="UserName0" /> <tt id="TipUserName0"></tt></dd>
<dd><input type="submit" value="提交" /></dd>
</dl>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#FormDemo01_0").SetValidateSettings({});
$("#UserName0").SetValidateSettings({
FormValidate: {
Empty: {
Value: true,
Message: "用户名不能为空"
}
},
Message: {
Text: {
Show: "请输入用户名！",
Success: "输入正确！",
Error: "必须输入用户名！",
Focus: "正在输入..."
},
MessageSpaceHolderID: "TipUserName0"
}
});
});
</script>
</fieldset>
<h6>示例2：</h6>
<fieldset>
<legend>验证之前，不除去控件值首尾空格。</legend>
<form id="FormDemo01_1" action="Demo.01.htm" method="post">
<dl>
<dt>用户名</dt>
<dd><input type="text" id="UserName1" name="UserName1" /> <tt id="TipUserName1"></tt></dd>
<dd><input type="submit" value="提交" /></dd>
</dl>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#FormDemo01_1").SetValidateSettings({});
$("#UserName1").SetValidateSettings({
FormValidate: {
Empty: {
Value: true,
Message: "用户名不能为空"
}
},
Config: {
AutoTrim: false //取消默认的自动去除首尾空格设置
},
Message: {
Text: {
Show: "请输入用户名！",
Success: "输入正确！",
Error: "必须输入用户名！",
Focus: "正在输入..."
},
MessageSpaceHolderID: "TipUserName1"
}
});
});
</script>
</fieldset>
</body>
</html> |
