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 相关文章推荐
JS实现鼠标框选效果完整实例
Jun 20 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
jquery实现轮播图效果
Feb 13 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
js下载文件并修改文件名
May 08 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
React实现动效弹窗组件
Jun 21 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
jQuery的一些注意
2006/12/06 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
编程语言Python的发展史
2014/09/26 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
类和结构的区别
2012/08/15 面试题
预备党员入党思想汇报
2014/01/04 职场文书
社区中秋节活动方案
2014/01/29 职场文书
护士求职信范文
2014/05/24 职场文书
手机销售员岗位职责
2015/04/11 职场文书
同学会感言
2015/07/30 职场文书
毕业感言怎么写
2015/07/31 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
python for循环赋值问题
2021/06/03 Python