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 API学Jquery之一 选择器
Apr 07 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
vue2 全局变量的设置方法
Mar 09 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
Django中modelform组件实例用法总结
2020/02/10 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
自荐信范文
2013/12/10 职场文书
庆七一活动方案
2014/01/25 职场文书
个人授权委托书
2014/04/03 职场文书
作风年建设汇报材料
2014/08/14 职场文书
英语读书笔记
2015/07/02 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS