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 与 php 通过json数据进行通讯示例
Mar 26 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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的数据库抽象层函数库
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP错误机制知识汇总
2016/03/24 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
vue-router源码之history类的浅析
2019/05/21 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python引用模块和查找模块路径
2016/03/17 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
学历公证委托书
2014/04/09 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
导游词之西安骊山
2019/12/20 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python