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实现图片轮播效果代码
Sep 03 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
解析javascript 实用函数的使用详解
2013/05/10 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python的净值数据接口调用示例分享
2016/03/15 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
P/Invoke是什么
2015/07/31 面试题
物流仓管员工作职责
2014/01/06 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
自主招生教师推荐信
2014/05/10 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
三严三实对照检查材料
2014/09/22 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
高中社区服务活动报告
2015/02/05 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
铁人观后感
2015/06/16 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
Python基本的内置数据类型及使用方法
2022/04/13 Python