jquery validate在ie8下的bug解決方法
更新時間:2013年11月13日 16:04:20 作者:
項目用到了jquery的表單校驗插件validate,但在ie8下有bug,下面有個不錯的解決方法,需要的朋友可以參考下
項目用到了jquery的表單校驗插件validate,之前一直都只是做很簡單的校驗,沒有做過稍微復雜的應用,近期項目對應用的要求提高了,一個頁面中有兩個提交按鈕,然后表單校驗是綁定在按鈕的點擊事件上的,如下。
然后很自然的就用到了插件的valid()函數(shù):
這個確實能達到相要的效果,但是在ie8下竟然有問題,valid()方法始終返回false,而且所有的字段都會被當成必填字段校驗,糾結了好久,因為jquery的插件代碼都很復雜,所以剛開始看特別費勁,后來一步一步排查,找到問題了,問題出在attributeRules()函數(shù)上:
這個函數(shù)的作用是:當你把校驗規(guī)則寫在頁面上而不是腳本里面時,同樣可以應用校驗框架。技術上是很合理的,對required的處理也是合理的,但是對于ie8來說,就有點問題了。ie8會執(zhí)行以下分支:
所以,所有的字段都會被當成必填字段校驗了。經(jīng)過測試,最后又兩種方法可以解決:
第一種是在rules()方法里面找到下面這段代碼,注釋掉對attributeRules()的調(diào)用,之所以可以這樣做,是因為一般很少會把校驗寫到頁面中去,當然這個肯定不是最佳解決方案,那就看看第二種。
第二種解決方法需要做兩件事情:首先,需要對attributeRules()方法做一些修改,把getAttribute()方法換成attr()方法。注意getAttribute()是js方法,而attr()是jquery方法,它們的使用對象是不一樣的,其實這樣改完后,ie8下面的bug已經(jīng)解決了,但是ie7下又出現(xiàn)了這種問題,所以你要用最新的jquery,我測試的時候用的是jquery1.10.2版本。
哦,對了,最后不要忘記阻止表單的默認事件。

然后很自然的就用到了插件的valid()函數(shù):

這個確實能達到相要的效果,但是在ie8下竟然有問題,valid()方法始終返回false,而且所有的字段都會被當成必填字段校驗,糾結了好久,因為jquery的插件代碼都很復雜,所以剛開始看特別費勁,后來一步一步排查,找到問題了,問題出在attributeRules()函數(shù)上:

這個函數(shù)的作用是:當你把校驗規(guī)則寫在頁面上而不是腳本里面時,同樣可以應用校驗框架。技術上是很合理的,對required的處理也是合理的,但是對于ie8來說,就有點問題了。ie8會執(zhí)行以下分支:

所以,所有的字段都會被當成必填字段校驗了。經(jīng)過測試,最后又兩種方法可以解決:
第一種是在rules()方法里面找到下面這段代碼,注釋掉對attributeRules()的調(diào)用,之所以可以這樣做,是因為一般很少會把校驗寫到頁面中去,當然這個肯定不是最佳解決方案,那就看看第二種。

第二種解決方法需要做兩件事情:首先,需要對attributeRules()方法做一些修改,把getAttribute()方法換成attr()方法。注意getAttribute()是js方法,而attr()是jquery方法,它們的使用對象是不一樣的,其實這樣改完后,ie8下面的bug已經(jīng)解決了,但是ie7下又出現(xiàn)了這種問題,所以你要用最新的jquery,我測試的時候用的是jquery1.10.2版本。

哦,對了,最后不要忘記阻止表單的默認事件。
您可能感興趣的文章:
- JQuery擴展插件Validate—6 radio、checkbox、select的驗證
- jQuery EasyUI API 中文文檔 - ValidateBox驗證框
- jQuery.Validate驗證庫的使用介紹
- Jquery Validate 正則表達式實用驗證代碼大全
- jquery內(nèi)置驗證(validate)使用方法示例(表單驗證)
- jquery validate添加自定義驗證規(guī)則(驗證郵箱 郵政編碼)
- 使用jquery.validate自定義方法實現(xiàn)"手機號碼或者固話至少填寫一個"的邏輯驗證
- jQuery驗證插件 Validate詳解
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- jQuery插件Validate實現(xiàn)自定義校驗結果樣式
相關文章
jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細介紹了jquery.multiselect 多選下拉框?qū)崿F(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
input輸入框在獲得或失去焦點時隱藏或顯示文字,這樣的焦點效果想必很多朋友在填寫form表格的時候都曾見識過吧,本文使用jquery實現(xiàn)以下,感興趣的朋友可以參考下哈2013-04-04