三、jQuery--jQuery插件--jQuery插件—

简介：

客户端验证：现代网站填写表单时，几乎一定会采用的方式。

优点：1、可以减少服务器压力

　　　2、缩短用户等待时间和提升用户体验

jQuery有很多表单验证插件：https://plugins.jquery.com/tag/validate/

其中jQuery Validation插件是最常用的插件之一：https://jqueryvalidation.org/

jQuery Validation插件:

　　1、让客户端表单验证变得非常容易，并且提供了很多的配置项目；

　　2、插件还附带了很多验证方法，并实现了国际化，可以配置多语言的提示信息。

如何使用：

在页面中引入插件

例如：用户名密码必填，用户名大于2个字符小于10个字符，密码大于2个字符小于16个字符，可以如下进行设置：

　　注意：这里的username和password是与表单里的name对应的，而不是ID。

基本API

重要概念

method：验证方法，指的是校验逻辑，比如email方法，检查输入的文本是否符合email的规则。

rule：验证规则，指的是元素和验证方法的关联。比如页面的一个id为email的文本框，需要带有email的验证方法。

validate()方法

validate是插件的核心方法，定义了基本的校验规则和一些有用的配置项。例如debug，如果这个参数为true，那么表单不会提交，只会进行检查，调试时十分方便。

基本验证方法：

required 必填

remote 远程校验

minlength 最小长度

maxlength 最大长度

rangelength 长度范围

min 最小值（数值）

max 最大值（数值）

range 值范围（数值）

email Email格式

url URL格式

date 日期

dateIOS IOS日期

number 数字

digits 整数（非负整数）

equalTo 与另一个元素值相等

高级API

valid()方法：

检查表单或某些元素是否有效

rules()方法（注意：只能针对元素使用）

rules()：获取表单元素的校验规则

rules("add",rules) 向表单元素增加校验规则

rules("remove",rules) 删除表单元素校验规则（同时移出多个校验规则可以将他们用空格隔开即可）

validator对象

validate方法返回Validator对象，Validator对象有很多有用的方法：

　　Validator.form() 验证表单是否有效，返回true/false

　　Validator.element(element) 验证某个元素是否有效，返回true/false

　　Validator.resetForm() 把表单恢复到验证前原来的状态

　　Validator.showErrors(errors) 针对某个元素显示特定的错误信息

　　Validator.numberOfInvalids() 返回无效的元素数量

validator对象还有很多有用的静态方法，可以直接使用：

　　jQuery.validator.addMethod(name,method[,message])

　　增加自定义验证方法

　　jQuery.validator.format(template,argument,argumentN...)

　　格式化字符串，用参数代替模板中的{N}

　　jQuery.validator.setDefaults(options)

　　修改插件默认设置

　　jQuery.validator.addClassRules(name,rules)

　　为某些名为name的class增加组合验证类型

validate()方法配置项

submitHandler 通过验证后运行的函数，可以加上表单提交的方法

invalidHandler 无效表单提交后运行的函数

ignore 对某些元素不进行验证

rules 定义校验规则

messages 定义提示信息

groups 对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在哪里

onsubmit 是否在提交时验证

onfocusout 是否在获取焦点时验证

onkeyup 是否在敲击键盘时验证

onclick 是否在鼠标点击时验证，一般用于checkbox或者radio

focusInvalid 提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）是否会获得焦点

focusCleanup 当未通过验证的元素获得焦点时，是否移出错误提示

errorClass 指定错误提示的CSS类名，可以自定义错误提示的样式

validClass 指定验证通过的CSS类名

errorElement 使用什么标签标记错误

wrapper 使用什么标签把上面的errorElement包裹起来

errorLabelContainer 把错误信息统一放在一个容器里面

errorContainer 显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏（容器原始状态为隐藏）

showErrors 可以显示总共有多少个未通过验证的元素

errorPlacement 自定义错误信息放在哪里

success 要验证的元素通过验证后的动作

highlight 可以给未通过验证的元素添加效果

unhighlight 去除未通过验证的元素的效果，一般和highlight同时使用

选择器拓展

:blank 选择所有值为空的元素

:filled 选择所有值不为空的元素

:unchecked 选择所有没有被选中的元素

自定义验证方法

jQuery.validator.addMethod(name,method[,message])

name：方法名称

method：function(value,element,params)方法逻辑

message：提示信息

additional-methods.js 包含了很多扩展验证方法

additional-methods插件实现了国际化

下面的代码就是官方给出的中文国际化的代码：

安全性

客户端校验安全

在数据被输入程序前，必须对数据合法性进行校验，非法输入问题是最常见的web应用程序安全漏洞

所有提交的表单数据，都必须验证两次，即提交前在客户端验证，提交后再服务器端再次验证，保证数据的合法性

服务器端不要相信任何的客户端数据！