項(xiàng)目用到了jquery的表單校驗(yàn)插件validate，之前一直都只是做很簡(jiǎn)單的校驗(yàn)，沒(méi)有做過(guò)稍微復(fù)雜的應(yīng)用，近期項(xiàng)目對(duì)應(yīng)用的要求提高了，一個(gè)頁(yè)面中有兩個(gè)提交按鈕，然后表單校驗(yàn)是綁定在按鈕的點(diǎn)擊事件上的，如下。
 
然后很自然的就用到了插件的valid()函數(shù)：
 
這個(gè)確實(shí)能達(dá)到相要的效果，但是在ie8下竟然有問(wèn)題，valid（）方法始終返回false，而且所有的字段都會(huì)被當(dāng)成必填字段校驗(yàn)，糾結(jié)了好久，因?yàn)閖query的插件代碼都很復(fù)雜，所以剛開(kāi)始看特別費(fèi)勁，后來(lái)一步一步排查，找到問(wèn)題了，問(wèn)題出在attributeRules（）函數(shù)上：
 
這個(gè)函數(shù)的作用是：當(dāng)你把校驗(yàn)規(guī)則寫(xiě)在頁(yè)面上而不是腳本里面時(shí)，同樣可以應(yīng)用校驗(yàn)框架。技術(shù)上是很合理的，對(duì)required的處理也是合理的，但是對(duì)于ie8來(lái)說(shuō)，就有點(diǎn)問(wèn)題了。ie8會(huì)執(zhí)行以下分支：
 
所以，所有的字段都會(huì)被當(dāng)成必填字段校驗(yàn)了。經(jīng)過(guò)測(cè)試，最后又兩種方法可以解決：

第一種是在rules()方法里面找到下面這段代碼，注釋掉對(duì)attributeRules（）的調(diào)用，之所以可以這樣做，是因?yàn)橐话愫苌贂?huì)把校驗(yàn)寫(xiě)到頁(yè)面中去，當(dāng)然這個(gè)肯定不是最佳解決方案，那就看看第二種。
 
第二種解決方法需要做兩件事情：首先，需要對(duì)attributeRules（）方法做一些修改，把getAttribute()方法換成attr()方法。注意getAttribute()是js方法，而attr()是jquery方法，它們的使用對(duì)象是不一樣的，其實(shí)這樣改完后，ie8下面的bug已經(jīng)解決了，但是ie7下又出現(xiàn)了這種問(wèn)題，所以你要用最新的jquery，我測(cè)試的時(shí)候用的是jquery1.10.2版本。
 
哦，對(duì)了，最后不要忘記阻止表單的默認(rèn)事件。

最新評(píng)論