jquery validate使用攻略 第四步
更新時(shí)間:2010年07月01日 20:13:35 作者:
自定義錯(cuò)誤消息的顯示方式
默認(rèn)情況下,驗(yàn)證提示信息用label元素來顯示, 并且會(huì)添加css class, 通過css可以很方便設(shè)置出錯(cuò)控件以及錯(cuò)誤信息的顯示方式。
/* 輸入控件驗(yàn)證出錯(cuò)*/
form input.error { border:solid 1px red;}
/* 驗(yàn)證錯(cuò)誤提示信息*/
form label.error{width: 200px;margin-left: 10px; color: Red;}
如果想自定義顯示方式,可以修改jquery.validate的默認(rèn)顯示方式
默認(rèn)用label顯示錯(cuò)誤消息,可以通過errorElement屬性來修改
errorElement: 錯(cuò)誤消息的html標(biāo)簽
$(".selector").validate
errorElement: "em"
})
可以在出錯(cuò)信息外用其他的元素包裝一層。
wrapper: 錯(cuò)誤消息的外層封裝html標(biāo)簽
$(".selector").validate({
wrapper: "li"
})
驗(yàn)證出錯(cuò)的css class默認(rèn)是error,通過errorClass可以修改
errorClass: 驗(yàn)證出錯(cuò)時(shí)使用的css class
$(".selector").validate({
errorClass: "invalid"
})
還自定義驗(yàn)證成功時(shí)的動(dòng)作
success: 如果值是字符串,會(huì)當(dāng)做一個(gè)css類,如果是一個(gè)函數(shù),則執(zhí)行該函數(shù)
$(".selector").validate({
success: "valid"
})
或者
success: function(label) {
label.html(" ").addClass("checked");
}
還可以把錯(cuò)誤消息統(tǒng)一到一個(gè)容器顯示
errorLabelContainer: 將錯(cuò)誤消息統(tǒng)一到一個(gè)容器顯示
$("#myform").validate({
errorLabelContainer: "#messageBox"
})
默認(rèn)情況下,錯(cuò)誤消息是放在驗(yàn)證元素后面的,可以自定義錯(cuò)誤消息的顯示位置
$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
}
})
更進(jìn)一步可以定義一個(gè)組,把幾個(gè)地方的出錯(cuò)信息統(tǒng)一放在一個(gè)地方,用error Placement控制把出錯(cuò)信息放在哪里
groups:定義一個(gè)組
$(".selector").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" )
error.insertAfter("#lastname");
else
error.insertAfter(element);
}
})
高亮顯示
highlight: 高亮顯示,默認(rèn)是添加errorClass
unhighlight: 和highlight對應(yīng),反高亮顯示
$(".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);
}
});
或者可以完全自定義錯(cuò)誤顯示
showErrors: 得到錯(cuò)誤的顯示句柄
$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})
/* 輸入控件驗(yàn)證出錯(cuò)*/
form input.error { border:solid 1px red;}
/* 驗(yàn)證錯(cuò)誤提示信息*/
form label.error{width: 200px;margin-left: 10px; color: Red;}
如果想自定義顯示方式,可以修改jquery.validate的默認(rèn)顯示方式
默認(rèn)用label顯示錯(cuò)誤消息,可以通過errorElement屬性來修改
errorElement: 錯(cuò)誤消息的html標(biāo)簽
$(".selector").validate
errorElement: "em"
})
可以在出錯(cuò)信息外用其他的元素包裝一層。
wrapper: 錯(cuò)誤消息的外層封裝html標(biāo)簽
$(".selector").validate({
wrapper: "li"
})
驗(yàn)證出錯(cuò)的css class默認(rèn)是error,通過errorClass可以修改
errorClass: 驗(yàn)證出錯(cuò)時(shí)使用的css class
$(".selector").validate({
errorClass: "invalid"
})
還自定義驗(yàn)證成功時(shí)的動(dòng)作
success: 如果值是字符串,會(huì)當(dāng)做一個(gè)css類,如果是一個(gè)函數(shù),則執(zhí)行該函數(shù)
$(".selector").validate({
success: "valid"
})
或者
success: function(label) {
label.html(" ").addClass("checked");
}
還可以把錯(cuò)誤消息統(tǒng)一到一個(gè)容器顯示
errorLabelContainer: 將錯(cuò)誤消息統(tǒng)一到一個(gè)容器顯示
$("#myform").validate({
errorLabelContainer: "#messageBox"
})
默認(rèn)情況下,錯(cuò)誤消息是放在驗(yàn)證元素后面的,可以自定義錯(cuò)誤消息的顯示位置
$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
}
})
更進(jìn)一步可以定義一個(gè)組,把幾個(gè)地方的出錯(cuò)信息統(tǒng)一放在一個(gè)地方,用error Placement控制把出錯(cuò)信息放在哪里
groups:定義一個(gè)組
$(".selector").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" )
error.insertAfter("#lastname");
else
error.insertAfter(element);
}
})
高亮顯示
highlight: 高亮顯示,默認(rèn)是添加errorClass
unhighlight: 和highlight對應(yīng),反高亮顯示
$(".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);
}
});
或者可以完全自定義錯(cuò)誤顯示
showErrors: 得到錯(cuò)誤的顯示句柄
$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})
您可能感興趣的文章:
- jquery validate.js表單驗(yàn)證的基本用法入門
- jQuery.Validate 使用筆記(jQuery Validation范例 )
- jquery.validate使用攻略 第一部
- jQuery validate 中文API 附validate.js中文api手冊
- jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框
- jQuery.Validate驗(yàn)證庫的使用介紹
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- 深入學(xué)習(xí)jQuery Validate表單驗(yàn)證(二)
相關(guān)文章
JS 遍歷 json 和 JQuery 遍歷json操作完整示例
這篇文章主要介紹了JS 遍歷 json 和 JQuery 遍歷json操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript與jQuery遍歷json格式數(shù)據(jù)的簡單實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-11-11jQuery插件FusionCharts繪制的2D條狀圖效果【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D條狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts插件繪制2D條狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
用JQuery操作DOM確實(shí)很方便,并且JQuery提供了非常人性化的API應(yīng)付我們的各種需求,其中選擇器在此示例-JQuery實(shí)現(xiàn)圖片輪播效果上體現(xiàn)的尤為出色。大大簡化了js的代碼。2010-09-09jQuery Select(單選) 模擬插件 V1.3.62 改進(jìn)版
改進(jìn)jQuery Select(單選) 模擬插件 V1.3.6,增加mouseover事件2010-07-07使用jQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告效果
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告效果,需要的朋友可以參考下2017-08-08jquery實(shí)現(xiàn)textarea輸入字符控制(仿微博輸入控制字符)
首先獲取輸入框的值然后獲取輸入框的值;如果字?jǐn)?shù)大于500、發(fā)布按鈕禁用否從發(fā)布按鈕啟用,感興趣的朋友可以詳細(xì)了解下哈2013-04-04jQuery實(shí)現(xiàn)輸入框郵箱內(nèi)容自動(dòng)補(bǔ)全與上下翻動(dòng)顯示效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框郵箱內(nèi)容自動(dòng)補(bǔ)全與上下翻動(dòng)顯示效果,涉及jquery.autoComplete.js插件的使用,可實(shí)現(xiàn)輸入框內(nèi)容自動(dòng)補(bǔ)全的功能,附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09