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 Excel操作知识点
Apr 24 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
Vue通过input筛选数据
Oct 26 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
微信小程序云开发实现云数据库读写权限
May 17 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 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.MVC的模板标签系统(五)
2006/09/05 PHP
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
Vue2.0如何发布项目实战
2017/07/27 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
人事部岗位职责范本
2014/03/05 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
公益广告语集锦
2014/03/13 职场文书
股东合作协议书范本
2014/04/14 职场文书
校园安全演讲稿
2014/05/09 职场文书
中学社团活动总结
2015/05/07 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
奠基仪式致辞
2015/07/30 职场文书
考研经验交流会策划书
2015/11/02 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Java 在生活中的 10 大应用
2021/11/02 Java/Android