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压缩工具:X2JSCompactor
Jun 13 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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分页类
2013/10/26 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
pandas分区间,算频率的实例
2019/07/04 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
初中班主任经验交流材料
2014/05/16 职场文书
实习公司领导推荐函
2014/05/21 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
优秀团员自我评价
2015/03/10 职场文书
MySQL触发器的使用
2021/05/24 MySQL
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫