jqueryvalidate表单验证框架详解.docx
- 文档编号:24098752
- 上传时间:2023-05-24
- 格式:DOCX
- 页数:65
- 大小:124.40KB
jqueryvalidate表单验证框架详解.docx
《jqueryvalidate表单验证框架详解.docx》由会员分享,可在线阅读,更多相关《jqueryvalidate表单验证框架详解.docx(65页珍藏版)》请在冰豆网上搜索。
jqueryvalidate表单验证框架详解
jQuery验证框架
Html代码
$(document).ready(function(){
$("#textForm").validate();
});
Name
$(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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jqueryvalidate 表单 验证 框架 详解