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 获取页面的高度及滚动条的位置的代码
May 06 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
vue小白入门教程
Apr 02 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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
4.与数据库的连接
2006/10/09 PHP
模仿OSO的论坛(五)
2006/10/09 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php如何连接sql server
2015/10/16 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python机器学习之随机森林(七)
2018/03/26 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python读取文件名称生成list的方法
2018/04/27 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
如何在python中判断变量的类型
2020/07/29 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
python zip()函数的使用示例
2020/09/23 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
美国家具网站:Cymax
2016/09/17 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
C语言面试题
2015/10/30 面试题
平面设计的岗位职责
2013/11/08 职场文书
房展策划方案
2014/06/07 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
2014年施工员工作总结
2014/11/18 职场文书
中学社团活动总结
2015/05/07 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书