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学习随笔(使用window和frame)的技巧
Mar 08 Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
Jquery 扩展方法
May 06 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 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修改session_id示例代码
2014/01/08 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
12岁生日感言
2014/01/21 职场文书
留学顾问岗位职责
2014/04/14 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
利用Pycharm连接服务器的全过程记录
2021/07/01 Python