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 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
JavaScript实现无限轮播效果
Nov 19 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学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
基于DataFrame改变列类型的方法
2018/07/25 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
宠物店的创业计划书范文
2014/01/11 职场文书
直接有效的自我评价
2014/01/11 职场文书
绩效工资实施方案
2014/03/15 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
简单租房协议书范本
2014/08/20 职场文书
党员四风剖析材料
2014/08/27 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
红色经典电影观后感
2015/06/18 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技