jquery.validate自定義驗證用法實例分析【成功提示與擇要提示】
本文實例講述了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)設(shè)置樣式
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) 設(shè)置樣式
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程序設(shè)計有所幫助。
相關(guān)文章
jQuery插件HighCharts繪制2D帶有Legend的餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶有Legend的餅圖效果,結(jié)合實例形式分析了jQuery使用HighCharts繪制帶明細顯示的餅狀圖效果實現(xiàn)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03JS拖動選擇table里的單元格完整實例【基于jQuery】
這篇文章主要介紹了JS拖動選擇table里的單元格,結(jié)合完整實例形式分析了基于jQuery的table表格動態(tài)操作相關(guān)實現(xiàn)技巧,涉及事件響應(yīng)及頁面元素屬性動態(tài)操作使用方法,需要的朋友可以參考下2019-05-05jQuery實現(xiàn)頁碼跳轉(zhuǎn)式動態(tài)數(shù)據(jù)分頁
本片文章教給大家用jQuery實現(xiàn)頁碼跳轉(zhuǎn)式動態(tài)數(shù)據(jù)分頁,效果非常好而且沒有頁面刷新,需要的朋友學(xué)習(xí)下吧。2017-12-12jQuery插件HighCharts實現(xiàn)的2D回歸直線散點效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D回歸直線散點效果,結(jié)合實例形式分析了jQuery基于HighCharts插件繪制直線散點圖形的具體相關(guān)操作步驟與實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery使用ul模擬select實現(xiàn)表單美化的方法
這篇文章主要介紹了jquery使用ul模擬select實現(xiàn)表單美化的方法,涉及jquery鼠標事件及頁面元素樣式的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08用JQuery調(diào)用Session的實現(xiàn)代碼
用JQuery調(diào)用Session的實現(xiàn)代碼,需要的朋友可以參考下。2010-10-10