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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
javascript 自定义事件初探
Aug 21 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
JavaScript中对象介绍
Dec 31 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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
检测png图片是否完整的php代码
2010/09/06 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
js图片处理示例代码
2014/05/12 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
使用python绘制常用的图表
2016/08/27 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python中logging包的使用总结
2018/02/28 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python如何绘制日历图和热力图
2020/08/07 Python
毕业生就业推荐信范文
2013/12/01 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
优秀党员自我评价范文
2014/09/15 职场文书