jquery validate在ie8下的bug解決方法
更新時間：2013年11月13日 16:04:20 作者：
項目用到了jquery的表單校驗插件validate，但在ie8下有bug，下面有個不錯的解決方法，需要的朋友可以參考下
項目用到了jquery的表單校驗插件validate，之前一直都只是做很簡單的校驗，沒有做過稍微復(fù)雜的應(yīng)用，近期項目對應(yīng)用的要求提高了，一個頁面中有兩個提交按鈕，然后表單校驗是綁定在按鈕的點擊事件上的，如下。
然后很自然的就用到了插件的valid()函數(shù)：
這個確實能達(dá)到相要的效果，但是在ie8下竟然有問題，valid（）方法始終返回false，而且所有的字段都會被當(dāng)成必填字段校驗，糾結(jié)了好久，因為jquery的插件代碼都很復(fù)雜，所以剛開始看特別費勁，后來一步一步排查，找到問題了，問題出在attributeRules（）函數(shù)上：
這個函數(shù)的作用是：當(dāng)你把校驗規(guī)則寫在頁面上而不是腳本里面時，同樣可以應(yīng)用校驗框架。技術(shù)上是很合理的，對required的處理也是合理的，但是對于ie8來說，就有點問題了。ie8會執(zhí)行以下分支：
所以，所有的字段都會被當(dāng)成必填字段校驗了。經(jīng)過測試，最后又兩種方法可以解決：
第一種是在rules()方法里面找到下面這段代碼，注釋掉對attributeRules（）的調(diào)用，之所以可以這樣做，是因為一般很少會把校驗寫到頁面中去，當(dāng)然這個肯定不是最佳解決方案，那就看看第二種。
第二種解決方法需要做兩件事情：首先，需要對attributeRules（）方法做一些修改，把getAttribute()方法換成attr()方法。注意getAttribute()是js方法，而attr()是jquery方法，它們的使用對象是不一樣的，其實這樣改完后，ie8下面的bug已經(jīng)解決了，但是ie7下又出現(xiàn)了這種問題，所以你要用最新的jquery，我測試的時候用的是jquery1.10.2版本。
哦，對了，最后不要忘記阻止表單的默認(rèn)事件。
然后很自然的就用到了插件的valid()函數(shù)：
這個確實能達(dá)到相要的效果，但是在ie8下竟然有問題，valid（）方法始終返回false，而且所有的字段都會被當(dāng)成必填字段校驗，糾結(jié)了好久，因為jquery的插件代碼都很復(fù)雜，所以剛開始看特別費勁，后來一步一步排查，找到問題了，問題出在attributeRules（）函數(shù)上：
這個函數(shù)的作用是：當(dāng)你把校驗規(guī)則寫在頁面上而不是腳本里面時，同樣可以應(yīng)用校驗框架。技術(shù)上是很合理的，對required的處理也是合理的，但是對于ie8來說，就有點問題了。ie8會執(zhí)行以下分支：
所以，所有的字段都會被當(dāng)成必填字段校驗了。經(jīng)過測試，最后又兩種方法可以解決：
第一種是在rules()方法里面找到下面這段代碼，注釋掉對attributeRules（）的調(diào)用，之所以可以這樣做，是因為一般很少會把校驗寫到頁面中去，當(dāng)然這個肯定不是最佳解決方案，那就看看第二種。
第二種解決方法需要做兩件事情：首先，需要對attributeRules（）方法做一些修改，把getAttribute()方法換成attr()方法。注意getAttribute()是js方法，而attr()是jquery方法，它們的使用對象是不一樣的，其實這樣改完后，ie8下面的bug已經(jīng)解決了，但是ie7下又出現(xiàn)了這種問題，所以你要用最新的jquery，我測試的時候用的是jquery1.10.2版本。
哦，對了，最后不要忘記阻止表單的默認(rèn)事件。
您可能感興趣的文章:
- JQuery擴展插件Validate—6 radio、checkbox、select的驗證
- jQuery EasyUI API 中文文檔 - ValidateBox驗證框
- jQuery.Validate驗證庫的使用介紹
- Jquery Validate 正則表達(dá)式實用驗證代碼大全
- jquery內(nèi)置驗證(validate)使用方法示例(表單驗證)
- jquery validate添加自定義驗證規(guī)則(驗證郵箱 郵政編碼)
- 使用jquery.validate自定義方法實現(xiàn)"手機號碼或者固話至少填寫一個"的邏輯驗證
- jQuery驗證插件 Validate詳解
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- jQuery插件Validate實現(xiàn)自定義校驗結(jié)果樣式
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)首頁圖片淡入淡出效果的方法,實例分析了jQuery圖片淡入淡出效果的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
jQuery?v3.3.1的BUG以及解決辦法(附解決方案)
這篇文章描述了我們?FineUIPro?產(chǎn)品?更新中遇到的一個問題，最終將問題定位到?jQuery.position()?函數(shù)，雖然jQuery的做法是依照HTML規(guī)范來的，但是?jQuery.offsetParent()?和?jQuery.position()?兩個函數(shù)有沖突，并且會導(dǎo)致之前的jQuery插件出錯，應(yīng)該算是一個BUG吧2023-03-03
可以設(shè)置左邊菜單項div的overflow-x:auto;overlfow-y:auto;這樣就會自動生成了滾動條，但是大家都知道自帶的不好看。接下來就是重點了，如何修改滾動條的樣式呢？感興趣的朋友可以了解下本文2013-07-07
jquery 顯示本地時間/ 帶日期、星期/ UTC，需要的朋友可以參考下。2011-05-05
下面小編就為大家?guī)硪黄猨query分隔Url的param方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了單擊和雙擊事件的沖突處理方法,需要的朋友可以參考下2014-04-04
jquery DIV撐大怎么讓滾動條滾到最底部，類似問題想必大家都有遇到過吧，下面與大家分享下具體的處理代碼，感興趣的朋友可以了解下哈2013-06-06
jquery實現(xiàn)的橫向二級導(dǎo)航效果代碼
這篇文章主要介紹了jquery實現(xiàn)的橫向二級導(dǎo)航效果代碼,可實現(xiàn)鼠標(biāo)滑過導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡潔自然,涉及jquery鼠標(biāo)hover事件及頁面元素樣式的動態(tài)改變技巧,需要的朋友可以參考下2015-08-08
網(wǎng)站設(shè)計者往往會設(shè)計一些小的工具類（widgets）或者一些可復(fù)用的程序，從而使頁面更楚楚動人，更吸引瀏覽者駐足。這里收集了20個常用Jquery工具類，這些小的工具可以幫助網(wǎng)站設(shè)計人員和站長非常容易地創(chuàng)建漂亮的站點。2010-01-01
這篇文章主要介紹了淺析jQuery EasyUI中的tree的用法,是根據(jù)個人對此的理解來實現(xiàn)的，需要的朋友可以參考下2014-12-12