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 相关文章推荐
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
PHP常用编译参数中文说明
2014/09/27 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
(function(){})()的用法与优点
2007/03/11 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
在Python中使用列表生成式的教程
2015/04/27 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python cs架构实现简单文件传输
2020/03/20 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
实习老师个人总结的自我评价
2013/09/28 职场文书
英文导游欢迎词
2014/01/11 职场文书
人事主管岗位职责
2014/01/30 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python