jquery.validate自定義驗證用法實例分析【成功提示與擇要提示】
更新時間：2020年06月06日 09:09:13 作者：moqiang02
這篇文章主要介紹了jquery.validate自定義驗證用法,結(jié)合實例形式分析了jQuery成功提示與擇要提示驗證操作相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下
本文實例講述了jquery.validate自定義驗證用法。分享給大家供大家參考，具體如下：
1. 自定義驗證--成功提示
1) 添加選項
errorClass: "unchecked",
validClass: "checked",
errorElement: "span",
errorPlacement: function (error, element) {
if (element.parent().find("span[for=""" + element.attr("id") + """]") != null) {
element.parent().find("span[for=""" + element.attr("id") + """]").remove();
}
error.appendTo(element.parent());
},
success: function (label) {
label.removeClass("unchecked").addClass("checked");
},
2)設置樣式
input.unchecked{border: 1px ＃E6594E dotted;}
span.checked {
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid ＃E6594E;white-space: nowrap;
text-align: left;color: ＃E6594E;background:url("/Common/Sys/Cfg/images/checked.gif") no-repeat 3px;/* ＃FCEAE8 */
}
span.unchecked {
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;border: 1px solid ＃E6594E;white-space: nowrap;
text-align: left;color: ＃E6594E;background: ＃FCEAE8 url("/Common/Sys/Cfg/images/unchecked.gif") no-repeat 3px;
}
2. 自定義驗證--擇要提示
1) 添加選項
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: ""li"",
meta: "validate",
errorClass: "unchecked",
validClass: "checked",
2) 設置樣式
input.unchecked{border: 1px ＃E6594E dotted;}
span.checked {
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid ＃E6594E;white-space: nowrap;
text-align: left;color: ＃E6594E;background:url("/Common/Sys/Cfg/images/checked.gif") no-repeat 3px;/* ＃FCEAE8 */
}
span.unchecked {
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;border: 1px solid ＃E6594E;white-space: nowrap;
text-align: left;color: ＃E6594E;background: ＃FCEAE8 url("/Common/Sys/Cfg/images/unchecked.gif") no-repeat 3px;
}
div.container {
background-color: ＃eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
.container label.error {
display: inline;
}
3) 添加擇要標識表記標幟
<div class="container"> <h4>There are serious errors in your form submission, please see below for details.</h4> <ul></ul> </div>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
相關(guān)文章
jQuery+css3實現(xiàn)Ajax點擊后動態(tài)刪除功能的方法
這篇文章主要介紹了jQuery+css3實現(xiàn)Ajax點擊后動態(tài)刪除功能的方法,可實現(xiàn)點擊選區(qū)后出現(xiàn)選區(qū)收縮、滾動消失的效果,涉及jquery結(jié)合Ajax與數(shù)學運算實時操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JQuery select（下拉框）操作方法匯總,本文講解了獲取選中項、獲取當前選中項的索引值、獲取當前option的最大索引值、獲取DropdownList的長度等內(nèi)容,需要的朋友可以參考下2015-04-04
jquery怎樣實現(xiàn)ajax聯(lián)動框(一)
ajax聯(lián)動框想必大家早有所耳聞，接下來本文詳細介紹下使用jquery實現(xiàn)的原理及代碼，感興趣的你可以參考下，或許對你有所幫助2013-03-03
AeroWindow是個Win7樣式的彈出窗口，jQuery插件，效果很酷!而且還像windows的窗口一樣可最大，最小化，隨意拖動。2011-06-06
jQuery是一款同prototype一樣優(yōu)秀js開發(fā)庫類，特別是對css和XPath的支持，使我們寫js變得更加方便，本篇文章給大家介紹jquery效果使用詳解，感興趣的朋友一起學習吧2015-11-11
artDialog雙擊會關(guān)閉對話框的修改過程分享
artDialog，一個jquery的對話框插件但是在使用時發(fā)現(xiàn)鼠標雙擊時會自半對話框，下面與大家分享下具體的修改過程，感興趣的朋友可以參考下2013-08-08
密保通常都會有n個問題，讓用戶選擇其中2、3個，而且都不會讓用戶選擇重復的問題。這就要求密?；コ猓唧w實現(xiàn)如下，有此需求的朋友可以參考下2013-08-08
jquery把int類型轉(zhuǎn)換成字符串類型的方法
下面小編就為大家?guī)硪黄猨query把int類型轉(zhuǎn)換成字符串類型的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery函數(shù)的第二個參數(shù)獲取指定上下文中的DOM元素
這篇文章主要介紹了jQuery函數(shù)的第二個參數(shù)獲取指定上下文中的DOM元素,需要的朋友可以參考下2014-05-05
招聘網(wǎng)站基于jQuery實現(xiàn)自動刷新簡歷
本文介紹下招聘網(wǎng)站基于jQuery實現(xiàn)自動刷新簡歷的方法，十分的簡單實用，有需要的朋友，參考下吧2015-05-05