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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
Vue3 源码导读(推荐)
Oct 14 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语言构造器介绍
2013/07/08 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python SQLite3简介
2018/02/22 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
explicit和implicit的含义
2012/11/15 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
物流仓管员工作职责
2014/01/06 职场文书
个人求职信范文分享
2014/01/06 职场文书
中文师范生自荐信
2014/01/30 职场文书
医院节能减排方案
2014/06/13 职场文书
2015毕业寄语大全
2015/02/26 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Python语言中的数据类型-序列
2022/02/24 Python