jValidate 基于jQuery的表單驗(yàn)證插件
<input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="請(qǐng)輸入正確的姓名." jvtipid="spt_name" jvmethod="checkname" />
<span id="spt_name" class="normaltips" jverrorclass="errortips" jvcorrectclass="correcttips"></span>
注意看上面代碼中以“jv“開(kāi)頭的各種屬性名,這些都是表單驗(yàn)證插件需要用的屬性值。其中各屬性代表的意思請(qǐng)閱讀以下表:
1、form表格控件元素可使用的屬性:
屬性名 | 說(shuō)明 |
jvpattern | 用來(lái)驗(yàn)證控件值是否正確的正則表達(dá)式。(可不定義此屬性) |
jvcompareid | 需要與當(dāng)前控件進(jìn)行值相等比較的其它控件id。(可不定義此屬性) |
jvrequired | 表明當(dāng)前控件值是否是必須的,也即是否允許當(dāng)前控件值為空。如不定義此屬性則默認(rèn)為不可空,如果值為false或0則允許為空。(可不定義此屬性) |
jvmethod |
定義需要進(jìn)行額外驗(yàn)證的方法。(可不定義此屬性) 此屬性值如果定義,則不需要輸寫“括號(hào)”,并且函數(shù)原型為: xx function(item){ //代碼 //true表示驗(yàn)證成功,false表示驗(yàn)證失敗。 return true/false; //或者帶錯(cuò)誤消息的返回 return {result:true/false, message:'錯(cuò)誤消息'}; } 其中item參數(shù)是當(dāng)前控件對(duì)象的jQuery實(shí)例。 |
jvtipid |
顯示驗(yàn)證提示信息的控件id。(可不定義此屬性) 注:如果不定義此屬性,并且未定義onerror或oncorrect函數(shù)則默認(rèn)為alert提示 |
jverrortip | 當(dāng)驗(yàn)證失敗時(shí)要顯示的提示信息。(可不定義此屬性) |
jvcorrecttip | 當(dāng)驗(yàn)證成功時(shí)要顯示的提示信息。(可不定義此屬性) |
jvfocuson | 當(dāng)驗(yàn)證失敗后是否需要將光標(biāo)移到控件上。(可不定義此屬性) |
控件上必須定義:jvpattern、jvmethod、jvcompareid 三者之中的一個(gè)或多個(gè),否則插件將不對(duì)對(duì)應(yīng)的控件進(jìn)行驗(yàn)證。
2、tip提示控件元素可使用的屬性:tip提示控件即是某個(gè)表單控件jvtipid指定的控件。
屬性名 | 說(shuō)明 |
jvnormalclass | 正常情況下顯示提示信息時(shí)采用的css樣式的classname。(可不定義此屬性) |
jvcorrectclass | 驗(yàn)證成功后顯示提示信息時(shí)采用的css樣式的classname。(可不定義此屬性) |
jverrorclass | 驗(yàn)證失敗后顯示提示信息時(shí)采用的css樣式的classname。(可不定義此屬性) |
當(dāng)控件規(guī)則設(shè)置好后就可以直接激活調(diào)用jValidate,以便當(dāng)表單進(jìn)行submit提交前,進(jìn)行驗(yàn)證檢查。
示例:
或者帶參數(shù)的調(diào)用:
blurvalidate : true,
isbubble : false,
onerror : function(item,form){
$.jMessageBox.show('錯(cuò)誤', item.attr('jverrortip'));
}
});
可設(shè)置的參數(shù)請(qǐng)閱讀下表:
參數(shù)名 | 說(shuō)明 |
isbubble |
是否允許“冒泡”,也即是否允許逐個(gè)檢查各控件值,如果值為true,則會(huì)逐一檢查驗(yàn)證所有已設(shè)置驗(yàn)證規(guī)則的控件;如果值為false則當(dāng)有一個(gè)控件值驗(yàn)證失?。ú环蠗l件)后,將退出后續(xù)控件的檢查。默認(rèn)值為false 注:如果提示信息是以彈出窗口方式顯示的,建議將此值設(shè)置為false,以免一下子彈出較多提示,引起用戶反感。 |
blurvalidate | 設(shè)置當(dāng)個(gè)個(gè)控件失去焦點(diǎn)后是否需要即時(shí)檢查驗(yàn)證。默認(rèn)值為false。 |
emptytip | 是否允許空提示。也即是當(dāng)沒(méi)有提示信息可顯示時(shí),是否還允許提示控件改變css類。默認(rèn)值為false |
oncorrect |
當(dāng)控件值驗(yàn)證成功時(shí)調(diào)用處理的方法,如果未定義則采用默認(rèn)行為。函數(shù)原型: function(item, form){ //代碼 } 其中參數(shù)item: 表示當(dāng)前控件的jQuery實(shí)例; form : 表示控件所在的表單實(shí)例 |
onerror |
當(dāng)控件值驗(yàn)證失敗時(shí)調(diào)用處理的方法,如果未定義則采用默認(rèn)行為。函數(shù)原型: function(item, form){ //代碼 } 其中參數(shù)item: 表示當(dāng)前控件的jQuery實(shí)例; form : 表示控件所在的表單實(shí)例 |
示例截圖:
源碼下載 壓縮包附帶jMessageBox示例
http://www.dbjr.com.cn/jiaoben/23094.html
- jQuery驗(yàn)證插件 Validate詳解
- JQuery擴(kuò)展插件Validate—4設(shè)置錯(cuò)誤提示的樣式
- JQuery擴(kuò)展插件Validate—6 radio、checkbox、select的驗(yàn)證
- JQuery擴(kuò)展插件Validate 5添加自定義驗(yàn)證方法
- jQuery驗(yàn)證插件validate使用方法詳解
- jQuery插件Validate實(shí)現(xiàn)自定義校驗(yàn)結(jié)果樣式
- jquery插件validate驗(yàn)證的小例子
- jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證
- Jquery插件 easyUI屬性匯總
- Jquery插件之多圖片異步上傳
- jQuery Dialog 彈出層對(duì)話框插件
- 強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
- 分享20多個(gè)很棒的jQuery 文件上傳插件或教程
- jQuery validate插件功能與用法詳解
相關(guān)文章
用jQuery獲取IE9下拉框默認(rèn)值問(wèn)題探討
本文與大家詳細(xì)探討下用jQuery獲取IE9下拉框默認(rèn)值的問(wèn)題,如果下拉框沒(méi)有空默認(rèn)值會(huì)怎么樣等一系列問(wèn)題,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07jQuery實(shí)現(xiàn)選項(xiàng)卡嵌套效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)選項(xiàng)卡嵌套效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03淺析jquery數(shù)組刪除指定元素的方法:grep()
下面小編就為大家?guī)?lái)一篇淺析jquery數(shù)組刪除指定元素的方法:grep()。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能附源碼下載
一些電商網(wǎng)站產(chǎn)品或評(píng)測(cè)網(wǎng)站會(huì)為用戶提供產(chǎn)品對(duì)比的功能,用戶只需勾選多個(gè)需要對(duì)比的產(chǎn)品,就可以進(jìn)行比對(duì),下文給大家?guī)?lái)了jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能,一起看下吧2016-08-08正則驗(yàn)證小數(shù)點(diǎn)后面只能有兩位數(shù)的方法
下面小編就為大家?guī)?lái)一篇正則驗(yàn)證小數(shù)點(diǎn)后面只能有兩位數(shù)的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02jquery網(wǎng)頁(yè)日歷顯示控件calendar3.1使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery網(wǎng)頁(yè)日歷顯示控件calendar3.1使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11