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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
JS判断数组四种实现方法详解
Jun 29 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
无限级别菜单的实现
2006/10/09 PHP
表单复选框向PHP传输数据的代码
2007/11/13 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python对数组进行反转的方法
2015/05/20 Python
python中import学习备忘笔记
2017/01/24 Python
python Django的web开发实例(入门)
2019/07/31 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python通过链接抓取网站详解
2019/11/20 Python
python3实现绘制二维点图
2019/12/04 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
称象教学反思
2014/02/03 职场文书
供货协议书
2014/04/22 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
学校捐款活动总结
2015/05/09 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript