jQuery表单校验jquery.validate.js的使用
2013-03-29 15:37
78 查看
jQuery是一个快速、简洁的js库，为网站的快速开发简化了HTML文档遍历，事件处理，动画，以及Ajax交互。使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮。
jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法
1.jquery包的引入：
引入jquery包：<script type="text/javascript" src="/common/js/jquery/jquery.js'"></script>
2.添加校验说明：
主要使用的是javascript编写的验证库——jQuery.Validate，这个验证库是属于jQuery的插件。
引入:
<script type="text/javascript" src="/common/js/jquery/jquery.validate.pack.js"></script>
jQuery.Validate 是监控form的，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需要在 jQuery(document).ready（）时为form进行验证注册，格式： $(“#formid”).validate(jsonobj)。
其中formid是文件中form表单的id，jsonobj包含两个属性：rules和messages，rules用来指明每个字段上添加的校验规则，messages用来说明相应的校验出错时对应的提示语。
messages为非必须，如果自己不定义该属性，会采用默认的提示。
例如/test/validate/formvalidate.jsp:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>表单校验</title>
<script type="text/javascript" src="/common/jquery.js"></script>
<script type="text/javascript" src="/common/jquery.validate.pack.js"></script>
<script type="text/javascript" src="/common/jquery.form.js"></script>
</head>
<body>
<form id="test">
<input name="nameput" type="text" size="20"/>
<input name="submit" type="submit" value="提交"/>
</form>
<script type="text/javascript">
$("#test").validate({
rules:{
"nameput":{
required:true,
minlength:3,
maxlength:10
}
},
messages:{
"nameput":{
required:"不能为空",
minlength:jQuery.format("长度不小于{0}"),
maxlength:jQuery.format("长度不大于{0}")
}
}
})
</script>
</body>
</html>
注意：nameput是input标签的name。
Required、minlength、maxlength都是jQuery校验的内置验证方式。jQuery内置验证方式参考jQuery.validate.js的API。
3.自定义验证方式
下面是自定义的验证方式：
$.validator.addMethod("stringlength", function(value, element,params) {
//默认值 : {trim:true,minLength:-1,maxLength:-1
params = $.extend([true,-1,-1],params); //对于默认参数支持
if(params[0]){ //过滤首尾空格
value=$.trim(value);
}
value = value.replace(/<(?:.)*?>/g,""); //验证时过滤标签
return this.optional(element) || ((params[1]<0 || value.length>=params[1])&&(params[2]<0 || value.length<=params[2]));
}, jQuery.format("长度在{1}-{2}之间"));
例如home工程中的登录校验：
$('#loginform').validate({//登陆校验
rules:{
"userAccount.userName":{
"requiredstring":["true"],
" requiredstring ":true,
"stringlength":["true","3","40"]
},
"userAccount.userPwd":{
"requiredstring":["true"],
"stringlength":["true","1","20"]
}
},
messages:{
"userAccount.userName":{
"requiredstring":"用户名必填",
"stringlength":jQuery.format("用户名长度在{1}和{2}之间")
},
"userAccount.userPwd":{
"requiredstring":"密码不可以为空",
"stringlength":jQuery.format("密码长度在{1}和{2}之间")
}
}
})
userAccount.userName是页面对应的input的name，requiredstring、requiredstring、stringlength是自己定义的校验，定义在/image/hi/common/js/zxwvalidate.js里。
｛1｝、｛2｝等是rules里面对应验证方式的第几个元素，从0开始。
简单的实例：
$.validator.addMethod("twd", function(value, element,params) { //默认值 : {trim:true,minLength:-1,maxLength:-1
params = $.extend([true,-1,-1],params); //对于默认参数支持
if(params[0]){
value=$.trim(value);
}
})
$("#test").validate({
rules:{
"nameput":{
"twd":[true,3,10]
}
},
messages:{
"nameput":{
"twd":jQuery.format("长度在{1}和{2}之间")
}
}
})
4.其他注意事项
（1）校验默认是在点击提交submit的时候起作用.
（2）如果缺少$().ready(function() { })，校验内容必须写在表单的后面。
（3）debug方法需要单独写或者rules和messages的后面，否则不会起作用。
附：
jQuery.Validate为我们提供了3种验证编写方式，各有优缺点：
（1）在input对象中书写class样式指定验证规则或属性验证规则：
如<input type=”text” class=”required”/>
最简单、最便捷，提示消息使用jQuery.Validate的内置的消息（自定义扩展验证规则也属于此项），但是由于是以样式名的方式进行验证，导致了日后修改必须找到相应的input对象，同时无法使用高级验证规则。
（2）在input对象中书写class样式，只不过书写的方式改为了JSON格式，但是这种方式提供了自定义验证消息的支持：
如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>
简单、方便，但个人认为有点臃肿，还是和第1条一样和相对应的input对象纠缠在一起，并且还增加消息自定义，使得input对象变的更大了，干扰了页面代码的阅读，但可以使用高级验证规则（实际就是将第3种JS以JSON的格式放到具体的class中。
（3）使用纯JS的方式：
如：
$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
})
})
很好的解决了HTML和验证规则的分离，就是书写较为麻烦，需要单独写JS脚本，但好处是可以统一验证规范，将每个页面的验证规则都写在头部的脚本中，方便日后维护。
默认的提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
}
jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法
1.jquery包的引入：
引入jquery包：<script type="text/javascript" src="/common/js/jquery/jquery.js'"></script>
2.添加校验说明：
主要使用的是javascript编写的验证库——jQuery.Validate，这个验证库是属于jQuery的插件。
引入:
<script type="text/javascript" src="/common/js/jquery/jquery.validate.pack.js"></script>
jQuery.Validate 是监控form的，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需要在 jQuery(document).ready（）时为form进行验证注册，格式： $(“#formid”).validate(jsonobj)。
其中formid是文件中form表单的id，jsonobj包含两个属性：rules和messages，rules用来指明每个字段上添加的校验规则，messages用来说明相应的校验出错时对应的提示语。
messages为非必须，如果自己不定义该属性，会采用默认的提示。
例如/test/validate/formvalidate.jsp:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>表单校验</title>
<script type="text/javascript" src="/common/jquery.js"></script>
<script type="text/javascript" src="/common/jquery.validate.pack.js"></script>
<script type="text/javascript" src="/common/jquery.form.js"></script>
</head>
<body>
<form id="test">
<input name="nameput" type="text" size="20"/>
<input name="submit" type="submit" value="提交"/>
</form>
<script type="text/javascript">
$("#test").validate({
rules:{
"nameput":{
required:true,
minlength:3,
maxlength:10
}
},
messages:{
"nameput":{
required:"不能为空",
minlength:jQuery.format("长度不小于{0}"),
maxlength:jQuery.format("长度不大于{0}")
}
}
})
</script>
</body>
</html>
注意：nameput是input标签的name。
Required、minlength、maxlength都是jQuery校验的内置验证方式。jQuery内置验证方式参考jQuery.validate.js的API。
3.自定义验证方式
下面是自定义的验证方式：
$.validator.addMethod("stringlength", function(value, element,params) {
//默认值 : {trim:true,minLength:-1,maxLength:-1
params = $.extend([true,-1,-1],params); //对于默认参数支持
if(params[0]){ //过滤首尾空格
value=$.trim(value);
}
value = value.replace(/<(?:.)*?>/g,""); //验证时过滤标签
return this.optional(element) || ((params[1]<0 || value.length>=params[1])&&(params[2]<0 || value.length<=params[2]));
}, jQuery.format("长度在{1}-{2}之间"));
例如home工程中的登录校验：
$('#loginform').validate({//登陆校验
rules:{
"userAccount.userName":{
"requiredstring":["true"],
" requiredstring ":true,
"stringlength":["true","3","40"]
},
"userAccount.userPwd":{
"requiredstring":["true"],
"stringlength":["true","1","20"]
}
},
messages:{
"userAccount.userName":{
"requiredstring":"用户名必填",
"stringlength":jQuery.format("用户名长度在{1}和{2}之间")
},
"userAccount.userPwd":{
"requiredstring":"密码不可以为空",
"stringlength":jQuery.format("密码长度在{1}和{2}之间")
}
}
})
userAccount.userName是页面对应的input的name，requiredstring、requiredstring、stringlength是自己定义的校验，定义在/image/hi/common/js/zxwvalidate.js里。
｛1｝、｛2｝等是rules里面对应验证方式的第几个元素，从0开始。
简单的实例：
$.validator.addMethod("twd", function(value, element,params) { //默认值 : {trim:true,minLength:-1,maxLength:-1
params = $.extend([true,-1,-1],params); //对于默认参数支持
if(params[0]){
value=$.trim(value);
}
})
$("#test").validate({
rules:{
"nameput":{
"twd":[true,3,10]
}
},
messages:{
"nameput":{
"twd":jQuery.format("长度在{1}和{2}之间")
}
}
})
4.其他注意事项
（1）校验默认是在点击提交submit的时候起作用.
（2）如果缺少$().ready(function() { })，校验内容必须写在表单的后面。
（3）debug方法需要单独写或者rules和messages的后面，否则不会起作用。
附：
jQuery.Validate为我们提供了3种验证编写方式，各有优缺点：
（1）在input对象中书写class样式指定验证规则或属性验证规则：
如<input type=”text” class=”required”/>
最简单、最便捷，提示消息使用jQuery.Validate的内置的消息（自定义扩展验证规则也属于此项），但是由于是以样式名的方式进行验证，导致了日后修改必须找到相应的input对象，同时无法使用高级验证规则。
（2）在input对象中书写class样式，只不过书写的方式改为了JSON格式，但是这种方式提供了自定义验证消息的支持：
如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>
简单、方便，但个人认为有点臃肿，还是和第1条一样和相对应的input对象纠缠在一起，并且还增加消息自定义，使得input对象变的更大了，干扰了页面代码的阅读，但可以使用高级验证规则（实际就是将第3种JS以JSON的格式放到具体的class中。
（3）使用纯JS的方式：
如：
$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
})
})
很好的解决了HTML和验证规则的分离，就是书写较为麻烦，需要单独写JS脚本，但好处是可以统一验证规范，将每个页面的验证规则都写在头部的脚本中，方便日后维护。
默认的提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在 Internet Explorer 中使用 Windows 窗体控件
- 转载:vi使用手册(zt)
- 使用ASP生成任意长度彩色BMP验证码图片
- 在Javascript中使用面向对象的编程
- 使用ASP.NET Global.asax 文件
- ADO.NET 数据库实例教程-DataSet的使用
- 使用JRockit Mission Control监控Java程序运行性能
- 在 .NET 中使用 BDP 和 DB2 UDB 构建分布式数据库应用程序3
- 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 微软使用郑码输入法10年未付费遭起诉
- 使用PHP批量生成随机用户名
- [转]Freetextbox 的使用 1.6.3的汉化的freetextbox。和3.0版本
- 一个使用 ANSI.SYS Escape Sequences 进行时间显示的例子
- 在LINQ to SQL中使用Translate方法以及修改查询用SQL （转）
- Python入门(P_SDK的安装与使用)
- [转载]使用Response.Filter过滤非法词汇
- SQL查询语句精华使用简要SQL查询语句精华使用简要
- 转：反射使用入门
- SQL中使用update inner join和delete inner join
- VC中在对话框上使用Rich Edit控件相关问题