jqueryvalidate表单验证框架详解Word格式文档下载.docx
《jqueryvalidate表单验证框架详解Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《jqueryvalidate表单验证框架详解Word格式文档下载.docx（55页珍藏版）》请在冰豆网上搜索。
$（document）.ready（function（）{
Name<
<
/>
此文谨以以上js片段开始介绍jQueryValidation。
验证从这个方法开始：
validate（[options]）
（一）、可选项（options）
[1]
debug
类型：
Boolean
默认：
false
说明：
开启调试模式。
如果为true，表单不会提交，而且会在控制台显示一些错误消息（需要Firebug或者Firebuglite）。
当要阻止表单默认提交事件，尝试去开启它。
$（"
.selector"
）.validate（{
debug:
true
}）
）.validate（{
debug:
true
}）
[2]
submitHandler
Callback
default（native）formsubmit
当表单通过验证，提交表单。
回调函数有个默认参数form
submitHandler:
function（form）
{
//
do
other
stuff
for
a
valid
form
form.submit（）;
}
submitHandler:
function（form）{
//dootherstuffforavalidform
form.submit（）;
}
[3]
invalidHandler
Callback
当未通过验证的表单提交时，可以在该回调函数中处理一些事情。
该回调函数有两个参数：
第一个为一个事件对象，第二个为验证器（validator）
invalidHandler:
function（form,
validator）
var
errors
=
validator.numberOfInvalids（）;
if
（errors）
message
==
1
?
'
You
missed
1
field.
It
has
been
highlighted'
:
+
fields.
They
have
;
div.error
span"
）.html（message）;
div.error"
）.show（）;
}
else
）.hide（）;
invalidHandler:
function（form,validator）{
varerrors=validator.numberOfInvalids（）;
if（errors）{
varmessage=errors==1
?
'
Youmissed1field.Ithasbeenhighlighted'
:
Youmissed'
+errors+'
fields.Theyhavebeenhighlighted'
div.errorspan"
}else{
}）
[4]
ignore
Seletor
当进行表单验证时，过滤掉选择器所选择的表单。
用了jQuerynot方法（not（））。
类型为submit和reset的表单总是被忽略的。
#myform"
ignore:
.ignore"
ignore:
"
[5]
rules
Options
rulesarereadfrommarkup（classes,attributes,metadata）
用户定义的键/值对规则。
键为一个表单元素的name属性（或是一组单选/复选按钮）、值为一个简单的字符串或者由规则/参数对（rule/parameter）组成的一个对象。
可以和class/attribute/metadata规则一起使用。
每个规则可以指定一个依存的验证前提条件。
rules:
simple
rule,
converted
to
{required:
true}
name:
compound
rule
email:
required:
true,
}/*
depends:
function（element）
return
#contactform_email:
checked"
）
}*/
rules:
{
//simplerule,convertedto{required:
true}
name:
//compoundrule
email:
required:
true,
}/*
depends:
function（element）{
return$（"
）
}*/
[6]
messages
验证方法默认使用的消息
用户自定义的键/值对消息。
键为一个表单元素的name属性，值为该表单元素将要显示的消息。
该消息覆盖元素的title属性或者默认消息。
消息可以是一个字符串或者一个回调函数。
回调函数必须在验证器的作用域中调用，将规则参数作为回调函数的第一个参数，将该表单元素作为回调函数的第二个参数，且必须返回一个字符串类型的消息。
},
messages:
Please
specify
your
We
need
email
address
contact
you"
Your
must
be
in
the
format
of
name@"
},
messages:
Pleasespecifyyourname"
Weneedyouremailaddresstocontactyou"
Youremailaddressmustbeintheformatofname@"
[7]
groups
Options
指定错误消息分组。
一个组由一个任意的组名作为键，一个由空白符分割的表单元素name属性列表作为值。
用errorPlacement定义组消息的存放位置。
Js代码
1.$（"
2.
groups:
3.
username:
fname
lname"
4.
5.
errorPlacement:
function（error,
element）
6.
（element.attr（"
）
fname"
7.
||
element.attr（"
8.
error.insertAfter（"
#lastname"
）;
9.
10.
error.insertAfter（element）;
11.
12.
13.
groups:
username:
fnamelname"
errorPlacement:
function（error,element）{
if（element.attr（"
）=="
||element.attr（"
）
error.insertAfter（"
else
error.insertAfter（element）;
true
[8]
onsubmit
true
提交时验证表单。
当设置为false时，只能用其它的事件验证。
onsubmit:
false
3.}）
onsubmit:
false
[9]
onfocusout
焦点离开时验证（单选/复选按钮除外）。
如果表单中没有输入任何内容，所有的规则将被跳过，除非该表单已经被标记为无效的。
onfocusout:
onfocusout:
[10]
onkeyup
当键盘按键弹起时验证。
只要表单元素没有被标记成无效的，不会有反应。
另外，所有的规则将在每次按键弹起时验证。
onkeyup:
onkeyup:
[11]
onclick
鼠标点击验证针对单选和复选按钮。
onclick:
onclick:
[12]
focusInvalid
当验证无效时，焦点跳到第一个无效的表单元素。
当为false时，验证无效时，没有焦点响应。
focusInvalid:
focusInvalid:
focusCleanup
如果为true，当表单得到焦点时，移除在该表单上的errorClass并隐藏所有错误消息。
避免与focusInvalid一起使用。
focusCleanup:
focusCleanup:
[13]
meta
String
如果想使用其它插件来使用元数据验证规则，得指定相应的元数据对象。
meta:
validate"
}）
input
type="
text"
name="
email"
class="
{validate:
{
true,
true}}"
meta:
inputtype="
{required:
true,email:
[14]
errorClass
String
error"
用此设定的样式来定义错误消息的样式。
errorClass:
invalid"
errorClass:
[15]
validClass
valid"
设定当验证通过时，消息显示的样式。
validClass:
success"
validClass:
[16]
errorElement
label"
用html元素类型创建错误消息的容器。
默认的"
有个优点就是能在错误消息与无效表单之间用for属性建立有意义的联系（一个常常使用的，而不管表单元素是什么的）。
errorElement:
em"
errorElement:
[17]
wrapper
Boolean
用一个指定的元素将错误消息包围。
与errorLabelContainer一起创建一个错误消息列表非常有用。
wrapper:
li"
wrapper:
[18]
errorLabelContainer
Selector
错误消息标签的容器。
errorLabelContainer:
#messageBox"
errorLabelContainer:
[19]
errorContainer
错误消息的容器。
errorContainer:
#messageBox1,
#messageBox2"
#messageBox1
ul"
function（）
alert（"
Submitted!
errorContainer:
#messageBox1,#messageBox2"
#messageBox1ul"
debug:
true,
function（）{alert（"
）}
[20]
showErrors
None,内置的显示消息
自定义消息显示的句柄。
该回调函数有两个参数，第一个为errorMap,第二个参数为errorList，在validator对象的上下文中调用。
参数只包含那些经过onblur/onkeyup验证的表单元素，也有可能是单个元素。
除此之外，你还可以用this.defaultShowErrors（）触发默认的行为。
showErrors:
function（errorMap,
errorList）
#summary"
）.html（"
form
contains
this.numberOfInvalids（）
errors,
see
details
below."
this.defaultShowErrors（）;
showErrors:
function（errorMap,errorList）{
$（"
Yourformcontains"
+this.numberOfInvalids（）
+"
errors,seedetailsbelow."
this.defaultShowErrors（）;
[21]
errorPlacement
紧跟在无效表单后的标签中
用户自定义错误标签的显示位置。
第一个参数：
一个作为jQuery对象的错误标签，第二个参数为：
一个作为jQuery对象的未通过验证的表单元素。
error.appendTo（
element.parent（"
td"
）.next（"
error.ap
升级会员 