欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jValidate 基于jQuery的表單驗證插件

 更新時間:2009年12月12日 01:30:44   作者:  
網上基于jQuery的表單驗證插件已有很多,但是這個輪子我還是繼續(xù)做一個,因為這個表單驗證插件是從我以前的個人JS框架移值過來的(我已慢慢投入jQuery的懷抱),并且它的驗證規(guī)則書寫方式也許會讓你眼前一亮。
網上的各類表單驗證插件的驗證規(guī)則都是寫在腳本里的,但我的插件的驗證規(guī)則卻是寫在表單元素的屬性里的。如下面的例子:
復制代碼 代碼如下:

<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>

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

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

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

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

此屬性值如果定義,則不需要輸寫“括號”,并且函數(shù)原型為:

xx function(item){

//代碼

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

return true/false;

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

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

}

其中item參數(shù)是當前控件對象的jQuery實例。

jvtipid

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

注:如果不定義此屬性,并且未定義onerror或oncorrect函數(shù)則默認為alert提示

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

控件上必須定義:jvpattern、jvmethod、jvcompareid 三者之中的一個或多個,否則插件將不對對應的控件進行驗證。

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

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

當控件規(guī)則設置好后就可以直接激活調用jValidate,以便當表單進行submit提交前,進行驗證檢查。

示例:

$('form').jValidate();

或者帶參數(shù)的調用:

$('form').jValidate({
blurvalidate : true,
isbubble : false,
onerror : function(item,form){
$.jMessageBox.show('錯誤', item.attr('jverrortip'));
}
});

可設置的參數(shù)請閱讀下表:

參數(shù)名 說明
isbubble

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

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

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

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

function(item, form){

//代碼

}

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

onerror

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

function(item, form){

//代碼

}

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

示例截圖:


源碼下載 壓縮包附帶jMessageBox示例
http://www.dbjr.com.cn/jiaoben/23094.html

相關文章

  • 用jQuery獲取IE9下拉框默認值問題探討

    用jQuery獲取IE9下拉框默認值問題探討

    本文與大家詳細探討下用jQuery獲取IE9下拉框默認值的問題,如果下拉框沒有空默認值會怎么樣等一系列問題,感興趣的朋友可以參考下哈,希望對大家有所幫助
    2013-07-07
  • jQuery實現(xiàn)選項卡嵌套效果

    jQuery實現(xiàn)選項卡嵌套效果

    這篇文章主要為大家詳細介紹了jQuery實現(xiàn)選項卡嵌套效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • jqNext能替代jQuery嗎

    jqNext能替代jQuery嗎

    隨著前端的發(fā)展和瀏覽器的升級,jQuery也開始有些缺陷,其中最主要的就是在處理大量數(shù)據時會出現(xiàn)性能問題,而為了解決這個問題,我們可以使用jqNext,這是jQuery的一個輕量級替代品,盡管它并不能完全取代jQuery,但在一些場景下使用起來是十分便利的
    2023-09-09
  • 淺析jquery數(shù)組刪除指定元素的方法:grep()

    淺析jquery數(shù)組刪除指定元素的方法:grep()

    下面小編就為大家?guī)硪黄獪\析jquery數(shù)組刪除指定元素的方法:grep()。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • Jquery基礎教程之DOM操作

    Jquery基礎教程之DOM操作

    大家都知道dom是一種與瀏覽器、平臺、語言無關的接口,使用dom接口可以很輕松訪問頁面中所有的標準組件,本篇文章主要給大家講解jquery基礎教程之dom操作,有需要的朋友可以參考下
    2015-08-08
  • 基于jQuery解決ios10以上版本縮放問題

    基于jQuery解決ios10以上版本縮放問題

    本文通過一段示例代碼給大家介紹了基于jQuery解決ios10以上版本縮放問題,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-11-11
  • vue-preview縮略圖報錯解決

    vue-preview縮略圖報錯解決

    這篇文章主要為大家介紹了vue-preview縮略圖報錯解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • jQuery實現(xiàn)產品對比功能附源碼下載

    jQuery實現(xiàn)產品對比功能附源碼下載

    一些電商網站產品或評測網站會為用戶提供產品對比的功能,用戶只需勾選多個需要對比的產品,就可以進行比對,下文給大家?guī)砹薺Query實現(xiàn)產品對比功能,一起看下吧
    2016-08-08
  • 正則驗證小數(shù)點后面只能有兩位數(shù)的方法

    正則驗證小數(shù)點后面只能有兩位數(shù)的方法

    下面小編就為大家?guī)硪黄齽t驗證小數(shù)點后面只能有兩位數(shù)的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • jquery網頁日歷顯示控件calendar3.1使用詳解

    jquery網頁日歷顯示控件calendar3.1使用詳解

    這篇文章主要為大家詳細介紹了jquery網頁日歷顯示控件calendar3.1使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11

最新評論