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中的关于类型转换的性能优化
Dec 14 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
校本课程教学计划
2015/01/19 职场文书
cf战队宣传语
2015/07/13 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL