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 相关文章推荐
ExtJS的拖拽效果示例
Dec 09 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
详解如何较好的使用js
Dec 16 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
Vue.use源码分析
Apr 22 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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开发框架的对比
2013/07/05 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP如何使用Memcached
2016/04/05 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python中subprocess批量执行linux命令
2018/04/27 Python
python async with和async for的使用
2019/06/20 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python中如何使用insert函数
2020/01/09 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python内置函数及功能简介汇总
2020/10/13 Python
Django自带的用户验证系统实现
2020/12/18 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
新三好学生主要事迹
2014/01/23 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2014年工商所工作总结
2014/12/09 职场文书
七一活动主持词
2015/06/29 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Python语言内置数据类型
2022/02/24 Python