表单验证插件----jquery validation

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作用相反

最后附上一张效果图：