熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jValidate 基於jQuery的表單驗證插件

2022-06-13   來源: JSP教程 
網上的各類表單驗證插件的驗證規則都是寫在腳本裡的但我的插件的驗證規則卻是寫在表單元素的屬性裡的如下面的例子

  復制代碼 代碼如下:

  <input name=name type=text id=name size= jvpattern=^+$ jverrortip=請輸入正確的姓名 jvtipid=spt_name jvmethod=checkname />
<span id=spt_name class=normaltips jverrorclass=errortips jvcorrectclass=correcttips></span>


  注意看上面代碼中以jv開頭的各種屬性名這些都是表單驗證插件需要用的屬性值其中各屬性代表的意思請閱讀以下表

  form表格控件元素可使用的屬性

屬性名 說明 jvpattern 用來驗證控件值是否正確的正則表達式(可不定義此屬性) jvcompareid 需要與當前控件進行值相等比較的其它控件id(可不定義此屬性) jvrequired 表明當前控件值是否是必須的也即是否允許當前控件值為空如不定義此屬性則默認為不可空如果值為false或則允許為空(可不定義此屬性) jvmethod

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

  此屬性值如果定義則不需要輸寫括號並且函數原型為

  xx function(item){

  //代碼

  //true表示驗證成功false表示驗證失敗

  return true/false;

  //或者帶錯誤消息的返回

  return {result:true/false message:錯誤消息};

  }

  其中item參數是當前控件對象的jQuery實例

jvtipid

  顯示驗證提示信息的控件id(可不定義此屬性)

  注如果不定義此屬性並且未定義onerror或oncorrect函數則默認為alert提示

jverrortip 當驗證失敗時要顯示的提示信息(可不定義此屬性) jvcorrecttip 當驗證成功時要顯示的提示信息(可不定義此屬性) jvfocuson 當驗證失敗後是否需要將光標移到控件上(可不定義此屬性)

  控件上必須定義jvpatternjvmethodjvcompareid 三者之中的一個或多個否則插件將不對對應的控件進行驗證

  tip提示控件元素可使用的屬性tip提示控件即是某個表單控件jvtipid指定的控件

屬性名 說明 jvnormalclass 正常情況下顯示提示信息時采用的css樣式的classname(可不定義此屬性) jvcorrectclass 驗證成功後顯示提示信息時采用的css樣式的classname(可不定義此屬性) jverrorclass 驗證失敗後顯示提示信息時采用的css樣式的classname(可不定義此屬性)

  當控件規則設置好後就可以直接激活調用jValidate以便當表單進行submit提交前進行驗證檢查

  示例

$(form)jValidate();

  或者帶參數的調用

$(form)jValidate({
blurvalidate : true
isbubble : false
onerror : function(itemform){
$jMessageBoxshow(錯誤 itemattr(jverrortip));
}
});

  可設置的參數請閱讀下表

參數名 說明 isbubble

  是否允許冒泡也即是否允許逐個檢查各控件值如果值為true則會逐一檢查驗證所有已設置驗證規則的控件如果值為false則當有一個控件值驗證失敗(不符合條件)後將退出後續控件的檢查默認值為false

  注如果提示信息是以彈出窗口方式顯示的建議將此值設置為false以免一下子彈出較多提示引起用戶反感

blurvalidate 設置當個個控件失去焦點後是否需要即時檢查驗證默認值為false emptytip 是否允許空提示也即是當沒有提示信息可顯示時是否還允許提示控件改變css類默認值為false oncorrect

  當控件值驗證成功時調用處理的方法如果未定義則采用默認行為函數原型

  function(item form){

  //代碼

  }

  其中參數item: 表示當前控件的jQuery實例; form : 表示控件所在的表單實例

onerror

  當控件值驗證失敗時調用處理的方法如果未定義則采用默認行為函數原型

  function(item form){

  //代碼

  }

  其中參數item: 表示當前控件的jQuery實例; form : 表示控件所在的表單實例

  示例截圖

  
源碼下載 壓縮包附帶jMessageBox示例


From:http://tw.wingwit.com/Article/program/Java/JSP/201405/30943.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.