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左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
理解javascript中的严格模式
Feb 01 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
js 窗口抖动示例
2013/09/04 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
python字符串连接方法分析
2016/04/12 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
pyspark 随机森林的实现
2020/04/24 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Android面试题附答案
2014/12/08 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
教育学习自我评价
2014/02/03 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
高考升学宴答谢词
2015/01/20 职场文书
售房协议书范本
2015/08/11 职场文书
初中信息技术教学反思
2016/02/16 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
使用refresh_token实现无感刷新页面
2022/04/26 Javascript