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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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上传文件并显示上传进度的方法
2015/03/24 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
php中namespace及use用法分析
2016/12/06 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
python daemon守护进程实现
2016/08/27 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python中property函数用法实例分析
2018/06/04 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
二手书店创业计划书
2014/01/16 职场文书
留学自荐信写作方法
2014/01/27 职场文书
工程质量月活动方案
2014/02/19 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
早上好问候语大全
2015/11/10 职场文书
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers