jqueryvalidateValidationjs验证框架帮助手册文档.docx

jqueryvalidateValidationjs验证框架帮助手册文档.docx

《jqueryvalidateValidationjs验证框架帮助手册文档.docx》由会员分享，可在线阅读，更多相关《jqueryvalidateValidationjs验证框架帮助手册文档.docx（35页珍藏版）》请在冰点文库上搜索。

jqueryvalidateValidationjs验证框架帮助手册文档

jquery.validate_Validation_.js验证框架_帮助_手册_文档

Html代码

$（document）.ready（function（）{

$（"#textForm"）.validate（）;

}）;

Name

此文谨以以上js片段开始介绍jQueryValidation。

验证从这个方法开始：

validate（[options]）

（一）、可选项（options）

[1]debug类型：

Boolean默认：

false

说明：

开启调试模式。

如果为true，表单不会提交，而且会在控制台显示一些错误消息（需要Firebug或者Firebuglite）。

当要阻止表单默认提交事件，尝试去开启它。

$（".selector"）.validate（{

debug:

true

}）

[2]submitHandler类型：

Callback默认：

default（native）formsubmit

说明：

当表单通过验证，提交表单。

回调函数有个默认参数form

$（".selector"）.validate（{

submitHandler:

function（form）{

//dootherstuffforavalidform

form.submit（）;

}

}）

[3]invalidHandler类型：

Callback

说明：

当未通过验证的表单提交时，可以在该回调函数中处理一些事情。

该回调函数有两个参数：

第一个为一个事件对象，第二个为验证器（validator）

$（".selector"）.validate（{

invalidHandler:

function（form,validator）{

varerrors=validator.numberOfInvalids（）;

if（errors）{

varmessage=errors==1

?

'Youmissed1field.Ithasbeenhighlighted'

:

'Youmissed'+errors+'fields.Theyhavebeenhighlighted';

$（"div.errorspan"）.html（message）;

$（"div.error"）.show（）;

}else{

$（"div.error"）.hide（）;

}

}

}）

[4]ignore类型：

Seletor

说明：

当进行表单验证时，过滤掉选择器所选择的表单。

用了jQuerynot方法（not（））。

类型为submit和reset的表单总是被忽略的。

$（"#myform"）.validate（{

ignore:

".ignore"

}）

[5]rules类型：

Options默认：

rulesarereadfrommarkup（classes,attributes,metadata）

说明：

用户定义的键/值对规则。

键为一个表单元素的name属性（或是一组单选/复选按钮）、值为一个简单的字符串或者由规则/参数对（rule/parameter）组成的一个对象。

可以和class/attribute/metadata规则一起使用。

每个规则可以指定一个依存的验证前提条件。

$（".selector"）.validate（{

rules:

{

//simplerule,convertedto{required:

true}

name:

"required",

//compoundrule

email:

{

required:

true,

email:

true

}/*

email:

{

depends:

function（element）{

return$（"#contactform_email:

checked"）

}

}*/

}

}）

[6]messages类型：

Options默认：

验证方法默认使用的消息

说明：

用户自定义的键/值对消息。

键为一个表单元素的name属性，值为该表单元素将要显示的消息。

该消息覆盖元素的title属性或者默认消息。

消息可以是一个字符串或者一个回调函数。

回调函数必须在验证器的作用域中调用，将规则参数作为回调函数的第一个参数，将该表单元素作为回调函数的第二个参数，且必须返回一个字符串类型的消息。

$（".selector"）.validate（{

rules:

{

name:

"required",

email:

{

required:

true,

email:

true

}

},

messages:

{

name:

"Pleasespecifyyourname",

email:

{

required:

"Weneedyouremailaddresstocontactyou",

email:

"Youremailaddressmustbeintheformatofname@"

}

}

}）

[7]groups类型：

Options

说明：

指定错误消息分组。

一个组由一个任意的组名作为键，一个由空白符分割的表单元素name属性列表作为值。

用errorPlacement定义组消息的存放位置。

Js代码

$（"#myform"）.validate（{

groups:

{

username:

"fnamelname"

},

errorPlacement:

function（error,element）{

if（element.attr（"name"）=="fname"

||element.attr（"name"）=="lname"）

error.insertAfter（"#lastname"）;

else

error.insertAfter（element）;

},

debug:

true

}）

[8]onsubmit类型：

Boolean默认：

true

说明：

提交时验证表单。

当设置为false时，只能用其它的事件验证。

Js代码

$（".selector"）.validate（{

onsubmit:

false

}）

[9]onfocusout类型：

Boolean默认：

true

说明：

焦点离开时验证（单选/复选按钮除外）。

如果表单中没有输入任何内容，所有的规则将被跳过，除非该表单已经被标记为无效的。

Js代码

$（".selector"）.validate（{

onfocusout:

false

}）

[10]onkeyup类型：

Boolean默认：

true

说明：

当键盘按键弹起时验证。

只要表单元素没有被标记成无效的，不会有反应。

另外，所有的规则将在每次按键弹起时验证。

$（".selector"）.validate（{

onkeyup:

false

}）

[11]onclick类型：

Boolean默认：

true

说明：

鼠标点击验证针对单选和复选按钮。

$（".selector"）.validate（{

onclick:

false

}）

[12]focusInvalid类型：

Boolean默认：

true

说明：

当验证无效时，焦点跳到第一个无效的表单元素。

当为false时，验证无效时，没有焦点响应。

$（".selector"）.validate（{

focusInvalid:

false

}）

[12]focusCleanup类型：

Boolean默认：

false

说明：

如果为true，当表单得到焦点时，移除在该表单上的errorClass并隐藏所有错误消息。

避免与focusInvalid一起使用。

$（".selector"）.validate（{

focusCleanup:

true

}）

[13]meta类型：

String

说明：

如果想使用其它插件来使用元数据验证规则，得指定相应的元数据对象。

$（"#myform"）.validate（{

meta:

"validate"

}）

{required:

true,email:

true}}"/>

[14]errorClass类型：

String默认：

"error"

说明：

用此设定的样式来定义错误消息的样式。

$（".selector"）.validate（{

errorClass:

"invalid"

}）

[15]validClass类型：

String默认：

"valid"

说明：

设定当验证通过时，消息显示的样式。

$（".selector"）.validate（{

validClass:

"success"

}）

[16]errorElement类型：

String默认：

"label"

说明：

用html元素类型创建错误消息的容器。

默认的"label"有个优点就是能在错误消息与无效表单之间用for属性建立有意义的联系（一个常常使用的，而不管表单元素是什么的）。

$（".selector"）.validate（{

errorElement:

"em"

}）

[17]wrapper类型：

Boolean

说明：

用一个指定的元素将错误消息包围。

与errorLabelContainer一起创建一个错误消息列表非常有用。

$（".selector"）.validate（{

wrapper:

"li"

}）

[18]errorLabelContainer类型：

Selector

说明：

错误消息标签的容器。

$（"#myform"）.validate（{

errorLabelContainer:

"#messageBox",

wrapper:

"li"

}）

[19]errorContainer类型：

Selector

说明：

错误消息的容器。

$（"#myform"）.validate（{

errorContainer:

"#messageBox1,#messageBox2",

errorLabelContainer:

"#messageBox1ul",

wrapper:

"li",debug:

true,

submitHandler:

function（）{alert（"Submitted!

"）}

}）

[20]showErrors类型：

Callback默认：

None,内置的显示消息

说明：

自定义消息显示的句柄。

该回调函数有两个参数，第一个为errorMap,第二个参数为errorList，在validator对象的上下文中调用。

参数只包含那些经过onblur/onkeyup验证的表单元素，也有可能是单个元素。

除此之外，你还可以用this.defaultShowErrors（）触发默认的行为。

$（".selector"）.validate（{

showErrors:

function（errorMap,errorList）{

$（"#summary"）.html（"Yourformcontains"

+this.numberOfInvalids（）

+"errors,seedetailsbelow."）;

this.defaultShowErrors（）;

}

}）

[21]errorPlacement类型：

Callback默认：

紧跟在无效表单后的标签中

说明：

用户自定义错误标签的显示位置。

第一个参数：

一个作为jQuery对象的错误标签，第二个参数为：

一个作为jQuery对象的未通过验证的表单元素。

$（"#myform"）.validate（{

errorPlacement:

function（error,element）{

error.appendTo（element.parent（"td"）.next（"td"））;

},

debug:

true

}）

[22]success类型：

String,Callback

说明：

如果指定它，当验证通过时显示一个消息。

如果是String类型的，则添加该样式到标签中，如果是一个回调函数，则将标签作为其唯一的参数。

$（"#myform"）.validate（{

//success:

"valid",

success:

function（label）{

label.addClass（"valid"）.text（"Ok!

"）

}

}）

[23]highlight类型：

Callback默认：

添加errorClass到表单元素

说明：

将未通过验证的表单元素设置高亮。

$（".selector"）.validate（{

highlight:

function（element,errorClass）{

$（element）.fadeOut（function（）{

$（element）.fadeIn（）

}）

}

}）

[24]unhighlight类型：

Callback默认：

移除errorClass

说明：

与highlight操作相反

$（".selector"）.validate（{

highlight:

function（element,errorClass）{

$（element）.addClass（errorClass）;

$（element.form）.find（"label[for="+element.id+"]"）

.addClass（errorClass）;

},

unhighlight:

function（element,errorClass）{

$（element）.removeClass（errorClass）;

$（element.form）.find（"label[for="+element.id+"]"）

.removeClass（errorClass）;

}

}）;

[25]ignoreTitle类型：

Boolean默认：

false

说明：

设置它用来跳过错误消息对title属性的引用，避免Google工具栏引起的冲突。

$（".selector"）.validate（{

ignoreTitle:

true

}）

（二）插件方法（jQueryvalidation）

文章分类:

Web前端

[1]validate（[options]）返回：

Validator

说明：

见第一部分[2]valid（）返回：

Boolean

说明：

检查表单是否已通过验证。

$（"#myform"）.validate（）;

$（"a.check"）.click（function（）{

alert（"Valid:

"+$（"#myform"）.valid（））;

returnfalse;

}）;

[3]rules（）返回：

Options

说明：

返回一个表单元素的验证规则。

有几个方法定义验证规则：

在表单元素的class属性中定义验证规则（推荐的方法）。

通过指定验证方法的属性（推荐的方法）。

可以通过元数据（metadata）插件来定义元数据验证规则。

可以通过指定validate（）方法的rules选项。

alert（$（"#password"）.rules（）["required"]）;

[4]rules（"add",rules）返回：

Options

参数"add"类型：

String

参数rules类型：

Options要添加的规则，与validate方法中的验证规则一致。

说明：

添加规则到匹配的表单元素，返回该元素的所有验证规则，需要先执行$（"form"）.validate（）。

在rules中也可以添加用户自定义的消息对象。

$（"#myinput"）.rules（"add",{

required:

true,

minlength:

2,

messages:

{

required:

"Requiredinput",

minlength:

jQuery.format（"Please,atleast{0}charactersarenecessary"）

}

}）;

[5]rules（"remove",[rules]）返回：

Options

参数"remove"类型：

String

参数rules（Options）类型：

Options用空白符分割的验证规则。

只操作通过rules选项或rules（"add"）指定的验证规则。

说明：

从第一个匹配的表单元素中移除指定的验证规则，并返回该元素所有的验证规则。

$（"#myinput"）.rules（"remove"）;

$（"#myinput"）.rules（"remove","minmax"）;

[6]removeAttrs（attributes）返回：

Options

参数attributes类型：

String用空白符分割的属性列表

说明：

从第一个匹配的表单元素中删除指定的属性并返回它们。

$（"#skip"）.click（function（）{

varrules=$（"#myinput"）.removeAttrs（"minmax"）;

$（"#myform）.submit（）;

$（"#myinput"）.attr（rules）;

}）;

（三、四）选择器及实用工具（jQueryvalidation）

文章分类:

Web前端

[1]:

blank返回：

Array

说明：

匹配所有空值的表单元素。

没有任何值或都空白符（whitespace）都被认为是空值。

它是由jQuery.trim（value）.length==0来判断的。

$（"input:

blank"）.css（"background-color","#bbbbff"）;

[2]:

filled返回：

Array

说明：

匹配所有不为空的表单元素。

任何值都可以认为是已输入的，但只有空白符的值除外。

它是由jQuery.trim（value）.length>0来判断的。

$（"input:

filled"）.css（"background-color","#bbbbff"）;

[3]:

unchecked返回：

Array

说明：

匹配所有未选择的表单元素。

反向操作为:

checked

functioncountUnchecked（）{

varn=$（"input:

unchecked"）.length;

$（"div"）.text（n+（n==1?

"is":

"are"）+"unchecked!

"）;

}

countUnchecked（）;

$（":

checkbox"）.click（countUnchecked）;

四、实用工具（Utilities）

jQuery.validator.format（template,[argument],[argumentN...]）返回：

String

参数template类型：

String要格式化的字符串

参数argument（Optional）类型：

String,Array用字符串或字符串数组（对应索引的元素）填充第一个占位符

参数argumentN...（Optional）类型：

String填充第二个或之后的占位符。

说明：

用参数来填充{n}占位符。

除template外的一个或多个参数都可以用来填充相应的占位符。

$（document）.ready（function（）{

$（"button"）.click（function（）{

varstr="Hello{0},thisis{1}";

alert（"'"+str+"'"）;

str=jQuery.validator.format（str,"World","Bob"）;

//str=$.validator.format（str,["koala","oo"]）;

alert（"'"+str+"'"）;

}）;

}）;

（五）验证器（jQueryvalidation）

validate方法返回的验证器对象（ValidatorObject）有一些公用的方法。

你可以用来触发验证程序或改变表单（form）的内容。

验证器对象有更多的方法，不过只有文档中给出的这些方法是专为使用而设计的。

（一）验证器方法（Validatormethods）

[1]form（）返回：

Boolean

说明：

验证表单是否通过验证，若通过验证则返回true，反之返回false。

这个方法在正常的提交事件（submitevent）触发，它返回一个结果。

$（"#myform"）.validate（）.form（）;

[2]element（element）返回：

Boolean

参数element类型：

Selector验证表单中的一个需要验证的表单元素。

说明：

验证单个表单元素是否通过验证，若通过验证则返回true，反之返回false。

这个方法在正常的焦点离开事件（blur）或按键弹起（keyup）时触发，它返回一个结果。

$（"#myform"）.validate（）.element（"#myselect"）;

[3]resetForm（）返回：

undefined

说明：

重置表单。

恢复表单元素到原来的值（需要form插件支持），移除无效验证的样式并隐藏错误消息。

（...貌似只有在IE下才可以移除样式）

varvalidator=$（"#myform"）.validate（）;

validator.resetForm（）;

[4]addClassRules（rules）返回：

undefined

参数rules类型：

Options样式类名-规则表。

说明：

添加一个复合的样式验证方法。

对于重构通用的联合规则非常有用。

jQuery.validator.addClassRules（{

name:

{

required:

true,

minlength:

2

},

zip:

{

required:

true,

digits:

true,

minlength:

5,

maxlength:

5

}

（六）内置验证方法（jQueryvalidation）

[1]required（）返回：

Boolean

说明：

让表单元素必须填写（选择）。

如果表单元素为空（textinput）或未选择（radio/checkbox）或选择了一个空值（select）。

作用于textinputs,selects,checkboxesandradiobuttons.

当select提供了一个空值选项Choose...则强迫用户去选择一个不为空的值。

$（"#myform"）.validate（{

rules:

{

fruit:

"required"

}

}）;

[2]required（dependency-expression）返回：

Boolean

参数dependency-expr