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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
javascript中递归的两种写法
Jan 17 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue 登录滑动验证实现代码
Aug 24 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python运算符重载详解及实例代码
2017/03/07 Python
python实现随机漫步算法
2018/08/27 Python
python实现飞机大战
2018/09/11 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
班组长工作职责
2013/12/25 职场文书
自荐信格式简述
2014/01/25 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
小型婚礼主持词
2015/06/30 职场文书
员工手册董事长致辞
2015/07/29 职场文书
组织委员竞选稿
2015/11/21 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js