Jquery validation remote 验证的缓存问题解决方法


Posted in Javascript onMarch 25, 2014

最近项目中一直在用 Jquery validation 做校验,结合bootstrap 和 jquery form 感觉效果不错。但是remote验证的缓存问题让我头痛了很久,几乎就像放弃这款插件了。

举例说明:

现有学校,年级,班级实体

在同一学校下不能有相同的年级,在同一年级下不能有相同的班级

以同一学校下不能有相同年级为例,在验证的时候用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">学校</label> 
<div class="controls"> 
<s:select name="schoolId" list="schools" listKey="schoolId" 
listValue="schoolName" headerKey="-1" headerValue="请选择学校"></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>

现在有 测试学校1、测试学校2,两所学校,其中测试学校1下有 小学一年级、小学二年级两个年级

理论上,在新增年级的时候,如果学校选择测试学校1,那么选择小学一年级、小学二年级时remote验证会报错“该年级已经存在”

事实上,第一次操作时,结果也是正确的
Jquery validation remote 验证的缓存问题解决方法 
但是如果此时再更改学校,比如选择测试学校2,由于缓存问题,validation插件并不会重新进行新的remote验证而会直接返回上一次验证的结果,于是就有了如下蛋疼的错误
Jquery validation remote 验证的缓存问题解决方法 
这还不是最难让人接受的,更严重的问题时如果先选择了测试学校2、和小学一年级,remote验证通过,此时再选择测试学校1,remote验证依然通过,如此一来同一学校下不能有相同年级的验证就等于失败了

于是进行了各种查询解决方法

有种说法是,在remote中加入 "cache: false",但是实测并没有解决问题

尝试过在学校下拉框上绑定onchange事件清空gradeId的值,依然无法解决问题

查阅了validation的api,发现 .valid() 方法可以主动触发验证,但是由于缓存问题,remote依然没有重新验证

还查看了validation的源码,发现其中有个previousValue这个东西,如果有值就会直接return 前一次的验证结果
Jquery validation remote 验证的缓存问题解决方法 
于是尝试了一下清空这个值

$("#schoolId").change(function(){ 
$("#gradeId").removeData("previousValue"); 
});

成功解决问题
Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
如何利用node转发请求详解
Sep 17 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 #Javascript
jquery动态更换设置背景图的方法
Mar 25 #Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 #Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 #Javascript
jquery的each方法使用示例分享
Mar 25 #Javascript
提取jquery的ready()方法单独使用示例
Mar 25 #Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 #Javascript
You might like
文件上传类
2006/10/09 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
使用typescript构建Vue应用的实现
2019/08/26 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
技校毕业生自荐书
2014/05/23 职场文书
2014年科室工作总结范文
2014/12/19 职场文书