Jquery validation remote 驗證的緩存問題解決方法
最近項目中一直在用 Jquery validation 做校驗,結(jié)合bootstrap 和 jquery form 感覺效果不錯。但是remote驗證的緩存問題讓我頭痛了很久,幾乎就像放棄這款插件了。
舉例說明:
現(xiàn)有學(xué)校,年級,班級實體
在同一學(xué)校下不能有相同的年級,在同一年級下不能有相同的班級
以同一學(xué)校下不能有相同年級為例,在驗證的時候用remote方式:
JS
"gradeId" : {
required : true,
min : 0,
remote: {
url: "gradeManager-checkGrade.action",
type: "post",
dataType: "json",
data: {
'gradeId' : function() {
return $("#gradeId").val();
},
'schoolId' : function() {
return $("#schoolId").val();
}
}
}
}
HTML
<div class="control-group">
<label class="control-label" for="schoolId">學(xué)校</label>
<div class="controls">
<s:select name="schoolId" list="schools" listKey="schoolId"
listValue="schoolName" headerKey="-1" headerValue="請選擇學(xué)校"></s:select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="gradeId">年級</label>
<div class="controls">
<s:select name="gradeId" list="grades" listKey="gradeId"
listValue="gradeName" headerKey="-1" headerValue="請選擇年級"></s:select>
</div>
</div>
現(xiàn)在有 測試學(xué)校1、測試學(xué)校2,兩所學(xué)校,其中測試學(xué)校1下有 小學(xué)一年級、小學(xué)二年級兩個年級
理論上,在新增年級的時候,如果學(xué)校選擇測試學(xué)校1,那么選擇小學(xué)一年級、小學(xué)二年級時remote驗證會報錯“該年級已經(jīng)存在”
事實上,第一次操作時,結(jié)果也是正確的

但是如果此時再更改學(xué)校,比如選擇測試學(xué)校2,由于緩存問題,validation插件并不會重新進行新的remote驗證而會直接返回上一次驗證的結(jié)果,于是就有了如下的錯誤

這還不是最難讓人接受的,更嚴重的問題時如果先選擇了測試學(xué)校2、和小學(xué)一年級,remote驗證通過,此時再選擇測試學(xué)校1,remote驗證依然通過,如此一來同一學(xué)校下不能有相同年級的驗證就等于失敗了
于是進行了各種查詢解決方法
有種說法是,在remote中加入 "cache: false",但是實測并沒有解決問題
嘗試過在學(xué)校下拉框上綁定onchange事件清空gradeId的值,依然無法解決問題
查閱了validation的api,發(fā)現(xiàn) .valid() 方法可以主動觸發(fā)驗證,但是由于緩存問題,remote依然沒有重新驗證
還查看了validation的源碼,發(fā)現(xiàn)其中有個previousValue這個東西,如果有值就會直接return 前一次的驗證結(jié)果

于是嘗試了一下清空這個值
$("#schoolId").change(function(){
$("#gradeId").removeData("previousValue");
});
成功解決問題
相關(guān)文章
JavaScript對象之間的轉(zhuǎn)換 jQuery對象和原聲DOM
jQuery對象和原聲DOM,JavaScript對象之間的轉(zhuǎn)換,學(xué)習(xí)jquery的朋友可以參考下。2011-03-03jquery實現(xiàn)通用版鼠標經(jīng)過淡入淡出效果
這篇文章主要介紹了jquery實現(xiàn)的通用版鼠標經(jīng)過淡入淡出效果,需要的朋友可以參考下2014-06-06Jquery公告滾動+AJAX后臺得到數(shù)據(jù)
ajax得到值,用JQUERY綁定給對應(yīng)的UL.利用JQUERY的動畫來實現(xiàn)他們的滾動公告。2011-04-04jQuery實現(xiàn)的導(dǎo)航動畫效果(附demo源碼)
這篇文章主要介紹了jQuery實現(xiàn)的導(dǎo)航動畫效果,可實現(xiàn)導(dǎo)航條的底部橫條隨鼠標移動的效果,涉及jQuery針對鼠標事件的響應(yīng)及頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04解析頁面加載與js函數(shù)的執(zhí)行 onload or ready
這篇文章主要介紹了頁面加載與js函數(shù)的執(zhí)行 onload or ready 需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12