jQuery Validation插件remote验证方式的Bug解决


Posted in Javascript onJuly 01, 2010

不过奇怪的是,最近用下来感觉有些古怪,因为好像有些死板,已有功能的应变能力还不强,甚至还有个奇怪的Bug。任何项目有Bug其实也正常,但这个Bug其实是一个文档上已经记载了,却没有实现的功能,这就有些说不过去了。这个问题便出在remote验证方式上,还好修改起来非常容易,在此记录一下,也方便以后的参考。
在表单验证时,有时候会需要发一个AJAX请求去服务器上进行判断,例如在用户注册时检查用户名是否存在。jQuery Validation插件提供了一种remote方式来实现这一点。例如我可以这样验证表单:

<form id="regForm"> 
<input type="text" name="userName" /> 
</form> 
<script language="javascript"> 
$('#regForm').validate({ 
'rules': { 
'userName': { 
'required': true, 
'remote': '/account/verify' 
}}); 
</script>

这样,jQuery Validation便会请求“/account/verify?userName=jeffz”这样的URL来获取true/false。可惜的是,我们在使用ASP.NET MVC时,往往会将input的name写为特定的形式,目的是利用DefaultModelBinder的强大绑定功能。例如:
<form id="regForm">
<input type="text" id="userName" name="user.Name" />
</form>
与此同时,我们用来进行验证的Action方法,它的参数名可能也有所不同:
public ActionResult Verify(string name) { ... }

根据文档描述,此时我们应该这样写:
$('#regForm').validate({ 
'rules': { 
'user.Name': { 
'remote': { 
url: '/account/verify', 
data: { 
name: function() { return $("#userName").val(); } 
}}}}});

可是,从实际效果来看,jQuery还是在请求“/account/verify?user.Name=jeffz”,百思不得其解。确认在三之后只得求助于jquery.validation.js源码,看后差点晕过去:
remote: function(value, element, param) { 
if ( this.optional(element) ) 
return "dependency-mismatch"; 
... 
param = typeof param == "string" && {url:param} || param; 
if ( previous.old !== value ) { 
previous.old = value; 
var validator = this; 
this.startRequest(element); 
var data = {}; 
data[element.name] = value; // data还是以element.name为准? 
$.ajax($.extend(true, { 
url: param, 
mode: "abort", 
port: "validate" + element.name, 
dataType: "json", 
data: data, 
success: function(response) { 
...

我很奇怪,不知道为什么会这样做,这样根本没有起到指定参数名的作用。那么,改吧:
remote: function(value, element, param) { 
if (this.optional(element)) 
return "dependency-mismatch"; 
... 
param = typeof param == "string" && {url:param} || param; 
if (previous.old !== value) { 
previous.old = value; 
var validator = this; 
this.startRequest(element); 
var data = {}; 
data[element.name] = value; 
$.ajax($.extend(true, { 
// url: param, 
url: param.url, 
mode: "abort", 
port: "validate" + element.name, 
dataType: "json", 
// data: data, 
data: param.data || data, 
success: function(response) { 
...

修改两处即可,问题就此解决。只可惜,jquery.validate.min.js类似的文件只能自己进行压缩了。
居然会出现这样的问题,实在令人费解。
Javascript 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
pjblog修改技巧汇总
Mar 12 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
js 上传图片预览问题
Dec 06 Javascript
js切换光标示例代码
Oct 10 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
jquery.validate使用攻略 第一部
Jul 01 #Javascript
jquery 新浪网易的评论块制作
Jul 01 #Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 #Javascript
jQuery ajax cache缓存问题
Jul 01 #Javascript
javascript 实用的文字链提示框效果
Jun 30 #Javascript
一个简单的js鼠标划过切换效果
Jun 30 #Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 #Javascript
You might like
php自动跳转中英文页面
2008/07/29 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
php实例分享之二维数组排序
2014/05/15 PHP
php创建多级目录的方法
2015/03/24 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
pycharm永久激活超详细教程
2020/10/29 Python
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
大一自我鉴定范文
2013/10/04 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
Redis基本数据类型Set常用操作命令
2022/06/01 Redis
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android