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 相关文章推荐
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
小程序实现抽奖动画
Apr 16 Javascript
js制作提示框插件
Dec 24 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学习之数组的定义和填充
2011/04/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP实现验证码校验功能
2017/11/16 PHP
js中prototype用法详细介绍
2013/11/14 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python每天必学之bytes字节
2016/01/28 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python getopt模块使用实例解析
2019/12/18 Python
python扫描线填充算法详解
2020/02/19 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
区分python中的进程与线程
2020/08/13 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python