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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
laypage分页控件使用实例详解
May 19 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
axios学习教程全攻略
Mar 26 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
JavaScript实现商品评价五星好评
Nov 30 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
coreseek 搜索英文的问题详解
2013/06/08 PHP
解析php入库和出库
2013/06/25 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
浅析JS运动
2015/12/28 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python生成日历实例解析
2014/08/21 Python
python实现bucket排序算法实例分析
2015/05/04 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
什么时候用assert
2015/05/08 面试题
移动通信专业自荐信范文
2013/11/12 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
办公室文员工作自我评价
2013/12/01 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
信息技术培训感言
2014/03/06 职场文书
企业标语大全
2014/07/01 职场文书
总经理检讨书
2014/09/15 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
销售业务员岗位职责
2015/02/13 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
教师学习心得体会范文
2016/01/21 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers