jQueryvalidation验证框架使用方法.docx
- 文档编号:3539719
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:55
- 大小:108.30KB
jQueryvalidation验证框架使用方法.docx
《jQueryvalidation验证框架使用方法.docx》由会员分享,可在线阅读,更多相关《jQueryvalidation验证框架使用方法.docx(55页珍藏版)》请在冰豆网上搜索。
jQueryvalidation验证框架使用方法
jQueryvalidation验证框架
jQuery验证框架
(一)可选项(jQueryvalidation)
15人收藏此文章,收藏此文章发表于8个月前,已有3152次阅读共0个评论15人收藏此文章
jQuery验证框架
Html代码
1.
2.
3.
8.
$(document).ready(function(){
$("#textForm").validate();
});
Name
此文谨以以上js片段开始介绍jQueryValidation。
验证从这个方法开始:
validate([options])
一、可选项(options)
[1] debug 类型:
Boolean 默认:
false
说明:
开启调试模式。
如果为true,表单不会提交,而且会在控制台显示一些错误消息(需要Firebug或者Firebuglite)。
当要阻止表单默认提交事件,尝试去开启它。
Js代码
1.$(".selector").validate({
2. debug:
true
3.})
$(".selector").validate({
debug:
true
})
[2] submitHandler 类型:
Callback 默认:
default(native)formsubmit
说明:
当表单通过验证,提交表单。
回调函数有个默认参数form
Js代码
1.$(".selector").validate({
2. submitHandler:
function(form) {
3. // do other stuff for a valid form
4. form.submit();
5. }
6.})
$(".selector").validate({
submitHandler:
function(form){
//dootherstuffforavalidform
form.submit();
}
})
[3] invalidHandler 类型:
Callback
说明:
当未通过验证的表单提交时,可以在该回调函数中处理一些事情。
该回调函数有两个参数:
第一个为一个事件对象,第二个为验证器(validator)
Js代码
1.$(".selector").validate({
2. invalidHandler:
function(form, validator) {
3. var errors = validator.numberOfInvalids();
4. if (errors) {
5. var message = errors == 1
6. ?
'You missed 1 field. It has been highlighted'
7. :
'You missed ' + errors + ' fields. They have been highlighted';
8. $("div.error span").html(message);
9. $("div.error").show();
10. } else {
11. $("div.error").hide();
12. }
13. }
14. })
$(".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的表单总是被忽略的。
Js代码
1.$("#myform").validate({
2. ignore:
".ignore"
3.})
$("#myform").validate({
ignore:
".ignore"
})
[5] rules 类型:
Options 默认:
rulesarereadfrommarkup(classes,attributes,metadata)
说明:
用户定义的键/值对规则。
键为一个表单元素的name属性(或是一组单选/复选按钮)、值为一个简单的字符串或者由规则/参数对(rule/parameter)组成的一个对象。
可以和class/attribute/metadata规则一起使用。
每个规则可以指定一个依存的验证前提条件。
Js代码
1.$(".selector").validate({
2. rules:
{
3. // simple rule, converted to {required:
true}
4. name:
"required",
5. // compound rule
6. email:
{
7. required:
true,
8. email:
true
9. }/*
10. email:
{
11. depends:
function(element) {
12. return $("#contactform_email:
checked")
13. }
14. }*/
15. }
16.})
$(".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属性或者默认消息。
消息可以是一个字符串或者一个回调函数。
回调函数必须在验证器的作用域中调用,将规则参数作为回调函数的第一个参数,将该表单元素作为回调函数的第二个参数,且必须返回一个字符串类型的消息。
Js代码
1.$(".selector").validate({
2. rules:
{
3. name:
"required",
4. email:
{
5. required:
true,
6. email:
true
7. }
8. },
9. messages:
{
10. name:
"Please specify your name",
11. email:
{
12. required:
"We need your email address to contact you",
13. email:
"Your email address must be in the format of name@"
14. }
15. }
16.})
$(".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代码
1.$(".selector").validate({
2. onfocusout:
false
3.})
$(".selector").validate({
onfocusout:
false
})
[10] onkeyup 类型:
Boolean 默认:
true
说明:
当键盘按键弹起时验证。
只要表单元素没有被标记成无效的,不会有反应。
另外,所有的规则将在每次按键弹起时验证。
Js代码
1.$(".selector").validate({
2. onkeyup:
false
3.})
$(".selector").validate({
onkeyup:
false
})
[11] onclick 类型:
Boolean 默认:
true
说明:
鼠标点击验证针对单选和复选按钮。
Js代码
1.$(".selector").validate({
2. onclick:
false
3.})
$(".selector").validate({
onclick:
false
})
[12] focusInvalid 类型:
Boolean 默认:
true
说明:
当验证无效时,焦点跳到第一个无效的表单元素。
当为false时,验证无效时,没有焦点响应。
Js代码
1.$(".selector").validate({
2. focusInvalid:
false
3.})
$(".selector").validate({
focusInvalid:
false
})
[12] focusCleanup 类型:
Boolean 默认:
false
说明:
如果为true,当表单得到焦点时,移除在该表单上的errorClass并隐藏所有错误消息。
避免与focusInvalid一起使用。
Js代码
1.$(".selector").validate({
2. focusCleanup:
true
3.})
$(".selector").validate({
focusCleanup:
true
})
[13] meta 类型:
String
说明:
如果想使用其它插件来使用元数据验证规则,得指定相应的元数据对象。
Js代码
1.$("#myform").validate({
2. meta:
"validate"
3.})
4.
{ required:
true, email:
true}}" />
$("#myform").validate({
meta:
"validate"
})
{required: true,email: true}}"/> [14] errorClass 类型: String 默认: "error" 说明: 用此设定的样式来定义错误消息的样式。 Js代码 1.$(".selector").validate({ 2. errorClass: "invalid" 3.}) $(".selector").validate({ errorClass: "invalid" }) [15] validClass 类型: String 默认: "valid" 说明: 设定当验证通过时,消息显示的样式。 Js代码 1.$(".selector").validate({ 2. validClass: "success" 3.}) $(".selector").validate({ validClass: "success" }) [16] errorElement 类型: String 默认: "label" 说明: 用html元素类型创建错误消息的容器。 默认的"label"有个优点就是能在错误消息与无效表单之间用for属性建立有意义的联系(一个常常使用的,而不管表单元素是什么的)。 Js代码 1.$(".selector").validate({ 2. errorElement: "em" 3.}) $(".selector").validate({ errorElement: "em" }) [17] wrapper 类型: Boolean 说明: 用一个指定的元素将错误消息包围。 与errorLabelContainer一起创建一个错误消息列表非常有用。 Js代码 1.$(".selector").validate({ 2. wrapper: "li" 3.}) $(".selector").validate({ wrapper: "li" }) [18] errorLabelContainer 类型: Selector 说明: 错误消息标签的容器。 Js代码 1.$("#myform").validate({ 2. errorLabelContainer: "#messageBox", 3. wrapper: "li" 4.}) $("#myform").validate({ errorLabelContainer: "#messageBox", wrapper: "li" }) [19] errorContainer 类型: Selector 说明: 错误消息的容器。 Js代码 1.$("#myform").validate({ 2. errorContainer: "#messageBox1, #messageBox2", 3. errorLabelContainer: "#messageBox1 ul", 4. wrapper: "li", debug: true, 5. submitHandler: function() { alert("Submitted! ") } 6.}) $("#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()触发默认的行为。 Js代码 1.$(".selector").validate({ 2. showErrors: function(errorMap, errorList) { 3. $("#summary").html("Your form contains " 4. + this.numberOfInvalids() 5.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQueryvalidation 验证 框架 使用方法