jqueryvalidate表单验证框架详解.docx

$（document）.ready（function（）{

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

}）;

Name

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

验证从这个方法开始：

validate（[options]）

（一）、可选项（options）

[1] debug     类型：

Boolean   默认：

false

     说明：

开启调试模式。

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

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

$（".selector"）.validate（{  

   debug:

 true  

}）  

$（".selector"）.validate（{

debug:

true

}）

[2] submitHandler     类型：

Callback   默认：

default（native）formsubmit

     说明：

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

回调函数有个默认参数form

$（".selector"）.validate（{  

   submitHandler:

 function（form） {  

       // do other stuff for a valid form  

    form.submit（）;  

   }  

}）  

$（".selector"）.validate（{

submitHandler:

function（form）{

//dootherstuffforavalidform

form.submit（）;

}

}）

[3] invalidHandler     类型：

Callback

     说明：

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

该回调函数有两个参数：

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

$（".selector"）.validate（{  

    invalidHandler:

 function（form, validator） {  

      var errors = validator.numberOfInvalids（）;  

      if （errors） {  

        var message = errors == 1  

          ?

 'You missed 1 field. It has been highlighted'  

          :

 'You missed ' + errors + ' fields. They have been highlighted';  

        $（"div.error span"）.html（message）;  

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

      } else {  

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

      }  

    }  

 }）  

$（".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"  

}）  

$（"#myform"）.validate（{

ignore:

".ignore"

}）

[5] rules     类型：

Options   默认：

rulesarereadfrommarkup（classes,attributes,metadata）

     说明：

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

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

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

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

$（".selector"）.validate（{  

   rules:

 {  

     // simple rule, converted to {required:

true}  

     name:

 "required",  

     // compound rule  

     email:

 {  

       required:

 true,  

       email:

 true  

     }/* 

     email:

 { 

         depends:

 function（element） { 

           return $（"#contactform_email:

checked"） 

         } 

     }*/  

   }  

}）  

$（".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:

 "Please specify your name",  

     email:

 {  

       required:

 "We need your email address to contact you",  

       email:

 "Your email address must be in the format of name@"  

     }  

   }  

}）  

$（".selector"）.validate（{

rules:

{

name:

"required",

email:

{

required:

true,

email:

true

}

},

messages:

{

name:

"Pleasespecifyyourname",

email:

{

required:

"Weneedyouremailaddresstocontactyou",

email:

"Youremailaddressmustbeintheformatofname@"

}

}

}）

[7] groups     类型：

Options

     说明：

指定错误消息分组。

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

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

Js代码

1.$（"#myform"）.validate（{  

2.  groups:

 {  

3.    username:

 "fname lname"  

4.  },  

5.  errorPlacement:

 function（error, element） {  

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

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

8.       error.insertAfter（"#lastname"）;  

9.     else  

10.       error.insertAfter（element）;  

11.   },  

12.   debug:

true  

13. }）  

$（"#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代码

1.$（".selector"）.validate（{  

2.   onsubmit:

 false  

3.}）  

$（".selector"）.validate（{

onsubmit:

false

}）

[9] onfocusout     类型：

Boolean   默认：

true

     说明：

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

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

Js代码

$（".selector"）.validate（{  

   onfocusout:

 false  

}）  

$（".selector"）.validate（{

onfocusout:

false

}）

[10] onkeyup     类型：

Boolean   默认：

true

     说明：

当键盘按键弹起时验证。

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

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

$（".selector"）.validate（{  

   onkeyup:

 false  

}）  

$（".selector"）.validate（{

onkeyup:

false

}）

[11] onclick     类型：

Boolean   默认：

true

     说明：

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

$（".selector"）.validate（{  

   onclick:

 false  

}）  

$（".selector"）.validate（{

onclick:

false

}）

[12] focusInvalid     类型：

Boolean   默认：

true

     说明：

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

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

$（".selector"）.validate（{  

   focusInvalid:

 false  

}）  

$（".selector"）.validate（{

focusInvalid:

false

}）

[12] focusCleanup     类型：

Boolean   默认：

false

     说明：

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

避免与focusInvalid一起使用。

$（".selector"）.validate（{  

   focusCleanup:

 true  

}）  

$（".selector"）.validate（{

focusCleanup:

true

}）

[13] meta     类型：

String

     说明：

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

$（"#myform"）.validate（{  

   meta:

 "validate"  

}）  

{ required:

 true, email:

true}}" />  

$（"#myform"）.validate（{

meta:

"validate"

}）

{required:

true,email:

true}}"/>

[14] errorClass     类型：

String   默认：

"error"

     说明：

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

$（".selector"）.validate（{  

   errorClass:

 "invalid"  

}）  

$（".selector"）.validate（{

errorClass:

"invalid"

}）

[15] validClass     类型：

String   默认：

"valid"

     说明：

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

$（".selector"）.validate（{  

   validClass:

 "success"  

}）  

$（".selector"）.validate（{

validClass:

"success"

}）

[16] errorElement     类型：

String   默认：

"label"

     说明：

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

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

$（".selector"）.validate（{  

   errorElement:

 "em"  

}）  

$（".selector"）.validate（{

errorElement:

"em"

}）

[17] wrapper     类型：

Boolean

     说明：

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

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

$（".selector"）.validate（{  

   wrapper:

 "li"  

}）  

$（".selector"）.validate（{

wrapper:

"li"

}）

[18] errorLabelContainer     类型：

Selector

     说明：

错误消息标签的容器。

$（"#myform"）.validate（{  

   errorLabelContainer:

 "#messageBox",  

   wrapper:

 "li"  

}）  

$（"#myform"）.validate（{

errorLabelContainer:

"#messageBox",

wrapper:

"li"

}）

[19] errorContainer     类型：

Selector

     说明：

错误消息的容器。

$（"#myform"）.validate（{  

   errorContainer:

 "#messageBox1, #messageBox2",  

   errorLabelContainer:

 "#messageBox1 ul",  

   wrapper:

 "li", debug:

true,  

   submitHandler:

 function（） { alert（"Submitted!

"） }  

}）  

$（"#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（"Your form contains "  

                                   + this.numberOfInvalids（）   

                                   + " errors, see details below."）;  

        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  

 }）  

$（"#myform"）.validate（{

errorPlacement:

function（error,element）{

error.ap