1、下载地址:http://jqueryvalidation.org/
2、使用方法:
<script type="text/javascript" src="http://www.xftz.cn/templets/yuanyou/js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
jquery表单对象.validate()
3、validade()方法
作用:验证选中的表单,传入一个配置对象用于对验证进行各种配置。
3.1.1、rules
作用:为各种表单元素添加各种验证规则
类型:object
使用方法:rules:{
name属性值:{
验证规则1,
验证规则2,
...
}...
}
3.1.2、内置的验证规则:
1)、required:必须输入的字段
使用:required:true,如果这个标签只有这一条验证规则,可以简写:name属性值:"required"
2)、minlength:最小字符长度
3)、maxlength:最大字符长度
4)、rangelength:字符长度必须介于某个区间
使用:rangelength:[2,3]
5)、min:输入值被允许的最小值(数字)
6)、max:输入值被允许的最大值(数字)
7)、range:[5,10],输入值必须介于某个区间
8)、number:true,必须是合法的数字
9)、digits:true,必须是整数
10)、email:true,必须是正确的邮箱
11)、url:true,必须是正确的网址
12)、equalTo:jq选择器,输入值必须和给定选择器的值相同
13)、remote:{
url:"check_email.php",
type:"post",
data:{
username:"xulinjun"
}
}
使用ajax方法,调用服务器端脚本,验证输入值
14)、extension:限定特定格式的后缀名,多个用"|"隔开,(需要引入additional-methods.min文件)
4、提示信息的汉化
4.1、直接引入汉化包
<script type="text/javascript" src="js/dist/localization/messages_zh.min.js"></script>
4.2、messages
如果需要在validate()方法内修改提示信息,则可以使用本方法,
自定义的提示信息,key:value的形式,key是要验证的元素,value可以是字符串或函数,举例:
messages:{
username:{
required:"必须填写"
},
username1:{
required:"必须填写",
equalTo:"俩次输入不一致"
}
}
//这里rules上面的值,messages里面可以同步使用,{0}代表第一个,{1}代表第二个...举例:
username:{
required:"必须填写",
min:"最小的值必须是{0}"
}
5、submitHandler
类型:function(form)
说明,通过验证后运行的函数,默认添加该函数则不会再提交除非手动提交或者使用return true,
函数参数:该函数接收一个参数,表示当前表单dom对象
6、invalidHandler(event,validator)
说明,当一个无效的表单(即验证不通过的时候)被提交的时候触发这个函数
函数参数:当前验证的表单validator对象
7、errorClass(默认值error)
类型:string
说明:指定错误提示与验证不通过的控件的css类名
8、validClass(默认值:valid)
类型:string
在验证成功的控件上加上传入的css类名
9、errorElement(默认值:label)
类型:string
说明:用什么标签标记错误
10、errorPlacement(默认值,在无效的元素之后)
类型:function(error,element)
说明:自定义错误信息放到哪里
11、errorContainer
选择器字符串
说明:有错误信息出现时把选择器匹配的元素变为显示,没有时隐藏。
12、errorLabelContainer
类型:选择器字符串
说明:把错误信息统一放在一个容器里面
13、wrapper
类型:string
说明:用什么标签再把上边的errorElement包起来
14、success
类型:string or function(label,element){
}
说明:每个字段验证通过执行函数
函数参数:label(信息提示标签的jquery对象),element(当初验证成功的dom元素对象)
如果跟一个字符串,会作为css类加在提示信息的标签上
15、highlight(默认值,添加errorClass到验证失败的表单控件)
类型:function(element,errorClass,vaildClass){
}
说明:传入的函数会在每个控件验证不通过时执行,我们可以通过这个配置属性,给不通过的控件添加效果
函数参数:element(当前未通过验证的dom元素对象),errorClass(错误时给错误提示标签的css类名称),vaildClass(vaildClass属性的当前值)
16、debug(默认值false)
类型:布尔值
设置为true之后则表单不会真正的提交,仅仅是验证
17、ignore(默认值:hidden)
类型:selector
说明:忽略某些元素不验证
三、validator对象
validate方法返回一个validator对象,我们称这个对象为validator对象
常用方法:
1、validator.form()
返回:boolean
验证form返回成功还是失败
2、validator.element()
返回:boolean
验证单个表单验证是成功还是失败
3、validator.resetForm()
把前面验证的form恢复到验证前原来的状态
4、validator.showErrors()
显示特定的错误信息
5、validator.numberOfInvalids()
返回验证不通过的字段数
静态方法:
6、$.validator.setDefaults()
改版默认的设置
7、$.validator.addClassRules()
增加组合验证类型,可以在一个css类里面用多种验证规则
8、$.validator.format()
用参数代表模板中的{n}
四、rules()方法
1、介绍:
查看,新增,移除一个表单控件的验证规则
2、使用:
表单控件.rules()
3、参数:
rules() 返回元素的验证规则
rules("add",rules) 增加验证规则
rules("remove",rules) 删除验证规则,多个验证规则用空格隔开
五、valid()方法
1、介绍
检查表单是否通过
2、使用
表单jquery对象.valid()
六、jquery validation提供的选择器
1、增加的选择器
:blank 选择所有没有值或者值为空白的控件
:filled 选择所有填写了非空值的表单控件
:unchecked 与jquery提供的checked作用相反
最后附上一张效果图: