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 纠正 cleanWhitespace函数
Mar 11 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
基于js实现数组相邻元素上移下移
May 19 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将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
vue实现文件上传功能
2018/08/13 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Python实现各种排序算法的代码示例总结
2015/12/11 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
长安大学毕业生自我鉴定
2014/01/17 职场文书
先进集体获奖感言
2014/02/13 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
个人授权委托书模板
2014/09/14 职场文书
安全生产会议制度
2015/08/06 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
创业计划书之花店
2019/09/20 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js