網(wǎng)上基于jQuery的表單驗(yàn)證插件已有很多，但是這個(gè)輪子我還是繼續(xù)做一個(gè)，因?yàn)檫@個(gè)表單驗(yàn)證插件是從我以前的個(gè)人JS框架移值過來(lái)的（我已慢慢投入jQuery的懷抱），并且它的驗(yàn)證規(guī)則書寫方式也許會(huì)讓你眼前一亮。

?

網(wǎng)上的各類表單驗(yàn)證插件的驗(yàn)證規(guī)則都是寫在腳本里的，但我的插件的驗(yàn)證規(guī)則卻是寫在表單元素的屬性里的。如下面的例子：

?

<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“開頭的各種屬性名，這些都是表單驗(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)證檢查。

示例：?

$('form').jValidate();

?

或者帶參數(shù)的調(diào)用：?

$('form').jValidate({
?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)證失敗（不符合條件）后，將退出后續(xù)控件的檢查。默認(rèn)值為false 注：如果提示信息是以彈出窗口方式顯示的，建議將此值設(shè)置為false，以免一下子彈出較多提示，引起用戶反感。
blurvalidate	設(shè)置當(dāng)個(gè)個(gè)控件失去焦點(diǎn)后是否需要即時(shí)檢查驗(yàn)證。默認(rèn)值為false。
emptytip	是否允許空提示。也即是當(dāng)沒有提示信息可顯示時(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示例，關(guān)于jMessageBox請(qǐng)參考此文)

/Files/kingthy/jvalidate.zip

?

轉(zhuǎn)載于:https://www.cnblogs.com/jcomet/archive/2010/03/24/1693572.html

總結(jié)

以上是生活随笔為你收集整理的基于jQuery的表单验证插件：jValidate的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。