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 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
JS FormData对象使用方法实例详解
Feb 12 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
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
Prototype Class对象学习
2009/07/19 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
秋季红领巾广播稿
2014/01/27 职场文书
教师产假请假条范文
2014/04/10 职场文书
小学综合实践活动总结
2014/07/07 职场文书
会计学专业求职信
2014/07/17 职场文书
名人传读书笔记
2015/06/26 职场文书
Python图像处理之图像拼接
2021/04/28 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript