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 开发中规范性的一点感想
Jun 23 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
Angular PWA使用的Demo示例
Jan 31 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
php实现购物车功能(上)
2020/07/23 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
js实现二级导航功能
2017/03/03 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
Python回调函数用法实例详解
2015/07/02 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
公司合作协议书范本
2014/04/18 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
演讲稿开场白台词
2014/08/25 职场文书
学习普通话的体会
2014/11/07 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang