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操作ajax返回的json的注意问题!
Feb 23 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 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管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript