jQuery插件——Validation Plugin表单验证

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

 

jQuery Validation插件是最经常使用的插件之一: http://jqueryvalidation.org/

 

1、基本API

 

rules里面的“username”是input中的“name”，不是“id”。

表单验证，主要是俩：一是规则，二是提示信息

 

当在使用validate插件的时候:

使用validate()方法的时候将debug设置为true,那么表单不会提交,只进行检查,调试时比较方便

 

validate（）方法是validate插件中 的核心方法<br>

基本的验证方法有required：true, 必填 remote:"url地址" 去该地址远程校验 minlength 最小长度 maxlength 最大长度 rangelength 长度范围 min最小值 max最大值 range值范围 email Email格式 url URL格式 date 日期 dateISO ISO日期 number 数字 digits 整数 equalTo 与另外一个元素值相等

 

配置项 remote 远程校验 -- 可用于发送数据到服务器进行校验

-- 能够是 get请求 即 remote :url 即可发送当前信息至该url进而获取信息      -- 也能够是 post请求 即 remote : {url: url,type: .., data :所要发送的信息} 即发送当前信息以及data中的信息至 url

 

2、基本API（2）

 

rangelength长度范围：是以数组的方式。例如[2,10]

min和minlength的区别：叫length表明是长度，不加length表明的是它的值，也就是值的范围要注意。

 

设置：email,url,date,dateISO:true

url：校验要加http://或https://

dateISO： yyyy-mm-dd 或 yyyy/mm/dd格式

 

number:true 提示输入必须为数字

digits:true 提示输入必须为非负整数

equalto:"#password" 密码确认

好比确认密码的制做equalTo:"选择器"(密码校验)  “#password"

 

3、高级API

 

△rules()方法

(只针对表单里的元素，而不是某个整个表单)

1.可使用rules("add",{})的方法来为元素添加规则，如:

$("#username").rules("add",{minlength:2,maxlength:10})

2.可使用rules("remove",{})的方法来为元素去掉规则，如：

$("#username").rules("remove","email")

 

使用valid方法能够来实现对表单的检查:

$("#bt1").bind("click",function(){

alert($("#demoForm").valid()?"填写正确":"填写错误");

})

 

validator对象方法

validate方法返回Validator对象，validator对象有不少有用的方法：

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

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

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

validator.showErrors(errors)针对某个元素显示特定的错误信息（自定义校验中可使用）

validator.numberOfInvalids()返回无效的元素数量（正确返回0）

 

validator对象静态方法，能够直接使用

$.validator.addMethod(name,method[,message])增长自定义的验证方法

$.validator.format(template,argument,argumentN...)格式化字符串，用参数代替模板中的{n}

$.validator.setDefaults(options)修改插件默认设置

$.validator.addClassRules(name,rules)为包含class属性名批量增长验证类型

 

validate()方法配置项

validate()方法配置项是validate插件的核心内容

 

submitHandler经过验证后运行的函数，能够加上表单提交方法

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

ignore对某些元素不进行验证

rules定义校验规则

messages定义提示信息

groups对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在那实例调用：

submitHandler:function(from){

//表单提交的方式

from:submit();//$(form).Ajax.submit();//$ajax等方式提交表单

}

 

invalidHandler:function(event,validator){ //event:无效验证触发的事件 //validator:对象

 

}也能够写一个事件来触发

$("选择器属性值").on("事件名",function(event,validator)){

 

});

 

ignore:"#hh" 对类hh不进行校验

 

每一个rules的配置方法都有一个默认depends：function（element）{条件}，表示当函数知足条件时，才开始检验该配置方法<br>

当配置方法有参数时可为该方法添加参数param：x，当depends中函数知足条件时才传入参数进行配置

 

groups:{login:"username password confirm-password"} //对一组元素进行验证

errorPlacement:function(error,element){ //对一组元素验证后错误信息显示

error.insertBefore("#info");

}

 

validate()方法配制项

onsubmit是否在提交时验证

onfocusout是否在获取焦点时验证

onkeyup是否在敲击键盘时验证

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

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

得焦点

focusCleanup当未经过验证的元素得到焦点时，是否移除错误提示

errorClass指定错误提示的css类名，默认为error,能够自定义错误提示的样式，固然类名也能够自定义设置

validClass指定验证经过的css类名 道理同上

errorElement使用什么标签标记错误 （如用<li>标记）

wrapper使用什么标签把上边的errorElement包起来 （如用<ul>包裹）

errorLabelContainer把错误信息统一防在一个容器里面 （如放在类或id选择器中）

errorContainer显示或者隐藏验证信息，能够自动实现由错误信息出现时把容器属性变为显示，无错误时隐藏（通常同时使用和上面3个或上面3个同时使用）

 

showError能够显示总共有多少个未经过验证的元素

showErrors:function(errorMap,errorList){

能够添加自定义错误方式

this.defaultShowErrors();//系统默认的错误信息展现方式

}

errorMap,errorList区别：list比map更详细，map能够直接自定义信息，list能够用来分析错误信息

 

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

success要验证的元素经过验证后的动做（主要针对的是label元素）

 

highlight能够给未经过验证的元素加效果（主要针对表单t元素）

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

 

选择器扩展：
:blank 选择全部值为空的元素
:filled 选择全部值不为空的元素
:unchecked 选择全部没有被选中的元素

 

4、 自定义验证方法

 

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

name:方法名称

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

message:提示消息

this.optional(element)意思填写值了才会验证，加上这个以后最好设置require，不然这个验证不会被执行

 

additional-methods.js包含了不少扩展验证方法。在写自定义方法时能够参考这个js库

 

全部提交的表单数据，都必须验证2次，提交前的客户端验证，提交后在服务器端再次进行验证，保证数据的合法性。

 

服务器端不要相信任何从客户端传过来的数据。