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模板技术
Apr 27 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Python中取整的几种方法小结
2017/01/06 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
什么是唯一索引
2015/07/05 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
专业技术职务聘任书
2014/03/29 职场文书
个人催款函范文
2015/06/23 职场文书
酒店宣传语大全
2015/07/13 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技