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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 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模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python实现大转盘抽奖效果
2019/01/22 Python
python变量命名的7条建议
2019/07/04 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
几个常见的消息中间件(MOM)
2014/01/08 面试题
小班下学期评语
2014/05/04 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书