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

一、下载地址：http://jqueryvalidation.org/

二、使用方法：

<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()

三、validade()方法

做用：验证选中的表单，传入一个配置对象用于对验证进行各类配置。

3.1.一、rules

做用：为各类表单元素添加各类验证规则

类型：object

使用方法：rules：{

　　　　name属性值：{

　　　　验证规则1,

　　　　验证规则2,

　　　　...

　　　　}...

}

3.1.二、内置的验证规则：

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.一、直接引入汉化包

<script type="text/javascript" src="js/dist/localization/messages_zh.min.js"></script>

4.二、messages

若是须要在validate()方法内修改提示信息，则可使用本方法，

自定义的提示信息，key：value的形式，key是要验证的元素，value能够是字符串或函数，举例：

messages:{
                username:{
                    required:"必须填写"
                },
            　　username1:{
                    required:"必须填写",
                    equalTo:"俩次输入不一致"
                }
            }
//这里rules上面的值，messages里面能够同步使用，{0}表明第一个，{1}表明第二个...举例：

username:{
　　required:"必须填写",
　　min:"最小的值必须是{0}"
}

五、submitHandler

类型：function(form)

说明，经过验证后运行的函数，默认添加该函数则不会再提交除非手动提交或者使用return true，

函数参数：该函数接收一个参数，表示当前表单dom对象

六、invalidHandler(event,validator)

说明，当一个无效的表单（即验证不经过的时候）被提交的时候触发这个函数

函数参数：当前验证的表单validator对象

七、errorClass（默认值error）

类型：string

说明：指定错误提示与验证不经过的控件的css类名

八、validClass（默认值：valid）

类型：string

在验证成功的控件上加上传入的css类名

九、errorElement（默认值：label）

类型：string

说明：用什么标签标记错误

十、errorPlacement(默认值，在无效的元素以后)

类型：function（error，element）

说明：自定义错误信息放到哪里

十一、errorContainer

选择器字符串

说明：有错误信息出现时把选择器匹配的元素变为显示，没有时隐藏。

十二、errorLabelContainer

类型：选择器字符串

说明：把错误信息统一放在一个容器里面

1三、wrapper

类型：string

说明：用什么标签再把上边的errorElement包起来

1四、success

类型：string or function(label,element){

}

说明：每一个字段验证经过执行函数

函数参数：label（信息提示标签的jquery对象），element（当初验证成功的dom元素对象）

若是跟一个字符串，会做为css类加在提示信息的标签上

1五、highlight（默认值，添加errorClass到验证失败的表单控件）

类型：function(element,errorClass,vaildClass){

}

说明：传入的函数会在每一个控件验证不经过时执行，咱们能够经过这个配置属性，给不经过的控件添加效果

函数参数：element（当前未经过验证的dom元素对象），errorClass（错误时给错误提示标签的css类名称），vaildClass（vaildClass属性的当前值）

1六、debug（默认值false）

类型：布尔值

设置为true以后则表单不会真正的提交，仅仅是验证

1七、ignore（默认值：hidden）

类型：selector

说明：忽略某些元素不验证

 3、validator对象

validate方法返回一个validator对象，咱们称这个对象为validator对象

经常使用方法：

一、validator.form()

返回：boolean

验证form返回成功仍是失败

二、validator.element()

返回：boolean

验证单个表单验证是成功仍是失败

三、validator.resetForm()

把前面验证的form恢复到验证前原来的状态

四、validator.showErrors()

显示特定的错误信息

五、validator.numberOfInvalids()

返回验证不经过的字段数

静态方法：

六、$.validator.setDefaults()

改版默认的设置

七、$.validator.addClassRules()

增长组合验证类型，能够在一个css类里面用多种验证规则

八、$.validator.format()

用参数表明模板中的{n}

 4、rules()方法

一、介绍：

查看，新增，移除一个表单控件的验证规则

二、使用：

表单控件.rules()

三、参数：

rules()  返回元素的验证规则

rules("add",rules)  增长验证规则

rules("remove",rules)  删除验证规则，多个验证规则用空格隔开

5、valid()方法

一、介绍

检查表单是否经过

二、使用

表单jquery对象.valid()

6、jquery validation提供的选择器

一、增长的选择器

：blank 选择全部没有值或者值为空白的控件

：filled 选择全部填写了非空值的表单控件

：unchecked 与jquery提供的checked做用相反

 最后附上一张效果图：