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获取textarea中的光标位置
May 06 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php实现学生管理系统
2020/03/21 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
python计算最大优先级队列实例
2013/12/18 Python
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python循环监控远程端口的方法
2015/03/14 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
美丽家庭事迹材料
2014/05/03 职场文书
警示教育观后感
2015/06/17 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书