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 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
JS实现灯泡开关特效
Mar 30 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
pandas中去除指定字符的实例
2018/05/18 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
python与idea的集成的实现
2020/11/20 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
中英文求职信范文
2014/01/27 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
导游词开场白
2015/01/31 职场文书
植物园观后感
2015/06/11 职场文书
物业保洁员管理制度
2015/08/05 职场文书
优秀新员工事迹材料
2019/05/13 职场文书