基於jQuery的表單驗證外掛程式 jValidate

2022-02-26 16:32:24 字數 2701 閱讀 3338

網上基於jquery的表單驗證外掛程式已有很多,但是這個輪子我還是繼續做乙個,因為這個表單驗證外掛程式是從我以前的個人js框架移值過來的(我已慢慢投入jquery的懷抱),並且它的驗證規則書寫方式也許會讓你眼前一亮。

網上的各類表單驗證外掛程式的驗證規則都是寫在指令碼裡的,但我的外掛程式的驗證規則卻是寫在表單元素的屬性裡的。如下面的例子:

<

input 

name

="name"

type

="text"

id="name"

size

="30"

jvpattern

="^.+$"

jverrortip

="請輸入正確的姓名."

jvtipid

="spt_name"

jvmethod

="checkname"

/>

<

span 

id="spt_name"

class

="normaltips"

jverrorclass

="errortips"

jvcorrectclass

="correcttips"

>

span

>

1、form**控制項元素可使用的屬性

屬性名

說明

jvpattern

用來驗證控制項值是否正確的正規表示式。(可不定義此屬性)

jvcompareid

需要與當前控制項進行值相等比較的其它控制項id。(可不定義此屬性)

jvrequired

表明當前控制項值是否是必須的,也即是否允許當前控制項值為空。如不定義此屬性則預設為不可空,如果值為false或0則允許為空。(可不定義此屬性)

jvmethod

定義需要進行額外驗證的方法。(可不定義此屬性)

此屬性值如果定義,則不需要輸寫「括號」,並且函式原型為:

xx function(item);

其中item引數是當前控制項物件的jquery例項。

jvtipid

顯示驗證提示資訊的控制項id。(可不定義此屬性)

注:如果不定義此屬性,並且未定義onerror或oncorrect函式則預設為alert提示

jverrortip

當驗證失敗時要顯示的提示資訊。(可不定義此屬性)

jvcorrecttip

當驗證成功時要顯示的提示資訊。(可不定義此屬性)

jvfocuson

當驗證失敗後是否需要將游標移到控制項上。(可不定義此屬性)

控制項上必須定義:jvpattern、jvmethod、jvcompareid 三者之中的乙個或多個,否則外掛程式將不對對應的控制項進行驗證。

2、tip提示控制項元素可使用的屬性:tip提示控制項即是某個表單控制項jvtipid指定的控制項。

屬性名

說明

jvnormalclass

正常情況下顯示提示資訊時採用的css樣式的classname。(可不定義此屬性)

jvcorrectclass

驗證成功後顯示提示資訊時採用的css樣式的classname。(可不定義此屬性)

jverrorclass

驗證失敗後顯示提示資訊時採用的css樣式的classname。(可不定義此屬性)

當控制項規則設定好後就可以直接啟用呼叫jvalidate,以便當表單進行submit提交前,進行驗證檢查。

示例: 

$('form').jvalidate();

或者帶引數的呼叫: 

$('form').jvalidate(

});引數名

說明

isbubble

是否允許「冒泡」,也即是否允許逐個檢查各控制項值,如果值為true,則會逐一檢查驗證所有已設定驗證規則的控制項;如果值為false則當有乙個控制項值驗證失敗(不符合條件)後,將退出後續控制項的檢查。預設值為false

注:如果提示資訊是以彈出視窗方式顯示的,建議將此值設定為false,以免一下子彈出較多提示,引起使用者反感。

blurvalidate

設定當個個控制項失去焦點後是否需要即時檢查驗證。預設值為false。

emptytip

是否允許空提示。也即是當沒有提示資訊可顯示時,是否還允許提示控制項改變css類。預設值為false

oncorrect

當控制項值驗證成功時呼叫處理的方法,如果未定義則採用預設行為。函式原型:

function(item, form){

//**

其中引數item: 表示當前控制項的jquery例項; form : 表示控制項所在的表單例項

onerror

當控制項值驗證失敗時呼叫處理的方法,如果未定義則採用預設行為。函式原型:

function(item, form){

//**

其中引數item: 表示當前控制項的jquery例項; form : 表示控制項所在的表單例項

示例截圖:

基於jQuery的表單驗證外掛程式 jValidate

網上基於jquery的表單驗證外掛程式已有很多,但是這個輪子我還是繼續做乙個,因為這個表單驗證外掛程式是從我以前的個人js框架移值過來的 我已慢慢投入jquery的懷抱 並且它的驗證規則書寫方式也許會讓你眼前一亮。網上的各類表單驗證外掛程式的驗證規則都是寫在指令碼裡的,但我的外掛程式的驗證規則卻是寫...

jquery 表單驗證外掛程式

1 為inputvalidator增加empty屬性。用於設定控制項文字值是否允許兩邊為空。具體請看demo1裡的密碼的校驗 該屬性是個物件,預設值 leftempty 表示左邊是否允許為空 rightempty 表示右邊是否允許為空 emptyerror 出現該錯誤的時候的提示,如果為null,則...

jquery驗證外掛程式 js表單驗證

寫道關鍵字 jquery驗證外掛程式 現在我做乙個註冊的驗證示例 需要字段 規則 username 必填 長度2 15 只能包含字母數字和下劃線 中文 password 必填 長度6 16 repassword 必填 長度6 16 值必須和密碼一樣 email 必填 必須符合郵件的格式 首先引入相關...