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 滚动条事件简单实例
Jul 12 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
Angular 容器部署的方法
Apr 17 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
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 array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python函数定义和调用过程详解
2020/02/09 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
Java语言的优势
2015/01/10 面试题
我们的节日端午节活动方案
2014/03/02 职场文书
空乘英文求职信
2014/04/13 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android