最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。作为一个标准的验证方法库,Validation拥有如下特点:
1.内置验证规则: 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
2.自定义验证规则: 可以很方便地自定义验证规则
3.简单强大的验证信息提示: 默认了验证信息提示,并提供自定义覆盖默认的提示信息的功能
4.实时验证: 可能通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证
validate.js下载地址:http://plugins.jquery.com/project/validate
metadata.js下载地址:http://plugins.jquery.com/project/metadata
使用方法:
1.引入jQuery库和Validation插件
-
<scriptsrc="scripts/jquery-1.6.4.js"type="text/javascript"></script>
-
<scriptsrc="scripts/jquery.validate.js"type="text/javascript"></script>
2.确定哪个表单需要被验证
-
<scripttype="text/javascript">
-
-
$(document).ready(function(){
-
$("#commentForm").validate();
-
});
-
-
</script>
3.针对不同的字段,进行验证规则编码,设置字段相应的属性
-
class="required"必须填写
-
class="requiredemail"必须填写且内容符合Email格式验证
-
class="url"符合URL格式验证
-
minlength="2"最小长度为2
可验证的规则有19种:
-
required:必选字段
-
remote:"请修正该字段",
-
email:电子邮件验证
-
url:网址验证
-
date:日期验证
-
dateISO:日期(ISO)验证
-
dateDE:
-
number:数字验证
-
numberDE:
-
digits:只能输入整数
-
creditcard:信用卡号验证
-
equalTo:”请再次输入相同的值“验证
-
accept:拥有合法后缀名的字符串验证
-
maxlength/minlength:最大/最小长度验证
-
rangelength:字符串长度范围验证
-
range:数字范围验证
-
max/min:最大值/最小值验证
另个一种验证方法(将所有的与验证相关的信息写到class属性中方便管理)
1.引入一个新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)
-
<scriptsrc="scripts/jquery.metadata.js"type="text/javascript"></script>
2.改变调用的验证方法
-
<scripttype="text/javascript">
-
-
$(document).ready(function(){
-
-
$("#commentForm").validate({meta:"validate"});
-
});
-
-
</script>
3.将验证规则全部编写到class属性中
-
class="{validate:{required:true,minlength:2,messages:{required:'请输入姓名',minlength:'请至少输入两个字符'}}}"
-
class="{validate:{required:true,email:true,messages:{required:'请输入电子邮件',email:'请检查电子邮件的格式'}}}"
也可以通过name属性来关联字段和验证规则的验证写法(验证行为和HTML结构完全脱钩)
-
$("#commentForm").validate({
-
rules:{
-
username:{
-
required:true,
-
minlength:2
-
},
-
email:{
-
required:true,
-
email:true
-
},
-
url:"url",
-
comment:"required"
-
},
-
messages:{
-
username:{
-
required:'请输入姓名',
-
minlength:'请至少输入两个字符'
-
},
-
email:{
-
required:'请输入电子邮件',
-
email:'请检查电子邮件的格式'
-
},
-
url:'请检查网址的格式',
-
comment:'请输入您的评论'
-
}
-
});
国际化
Validation插件的验证信息默认语言是英文,如果要改成中文,只需要引入Validation提供的中文验证信息即可,引入代码如下:
-
<scriptsrc="scripts/jquery.validate.messages_cn.js"type="text/javascript"></script>
自定义验证信息并美化
-
errorElement:"em",
-
success:function(label){
-
label.text("")
-
.addClass("success");
-
}
-
在CSS中添加样式与之关联
-
em.error{
-
background:url("images/unchecked.gif")no-repeat0px0px;
-
padding-left:16px;
-
}
-
em.success{
-
background:url("images/checked.gif")no-repeat0px0px;
-
padding-left:16px;
-
}
自定义验证规则
-
-
$.validator.addMethod(
-
"formula",
-
function(value,element,param){
-
returnvalue==eval(param);
-
},
-
'请正确输入数学公式计算后的结果'
-
);
-
-
$("#commentForm").validate({
-
rules:{
-
username:{
-
required:true,
-
minlength:2
-
},
-
email:{
-
required:true,
-
email:true
-
},
-
url:"url",
-
comment:"required",
-
valcode:{
-
formula:"7+9"
-
}
-
},
-
messages:{
-
username:{
-
required:'请输入姓名',
-
minlength:'请至少输入两个字符'
-
},
-
email:{
-
required:'请输入电子邮件',
-
email:'请检查电子邮件的格式'
-
},
-
url:'请检查网址的格式',
-
comment:'请输入您的评论',
-
valcode:'验证码错误'
-
}
-
});
分享到:
相关推荐
很强大jquery表单验证插件jquery.validate.js api.pdf
jquery.validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。 这里提供了该插件的下载。
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 、表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家。 1.点击表单项,显示帮助提示 2.鼠标离开表...
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件—-Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到...
由于jquery.validate.js只针对元素name做了验证而没有针对元素ID进行验证,所以在使用jquery.validate插件http://jqueryvalidation.org/,当节点的name相同时候,脚本特意忽略剩余节点,导致所有相关节点的errMsg都...
主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下
Validate通用表单验证Jquery插件.zip。前端js实现 表单多种验证,不需要请求服务器,正则表达式匹配手机号、邮箱、IP地址、身份证、中文等。
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
强大的表单验证插件
jQuery Validate表单验证插件,前端jq验证,jq验证插件
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
通用表单验证Jquery插件