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的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
Vuex简单入门
2017/04/19 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python 生成器协程运算实例
2017/09/04 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python3 map函数和filter函数详解
2019/08/26 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
python实现五子棋程序
2020/04/24 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
大学生思想汇报范文
2013/12/31 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
员工年终考核评语
2014/12/31 职场文书
python本地文件服务器实例教程
2021/05/02 Python
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript