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 相关文章推荐
javascript编程起步(第五课)
Jan 10 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
js验证是否为数字的总结
Apr 14 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
vue监听键盘事件的相关总结
Jan 29 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
分享PHP入门的学习方法
2007/01/02 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP多文件上传类实例
2015/03/07 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JavaScript中的this机制
2016/01/30 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
中介业务员岗位职责
2014/04/09 职场文书
先进典型发言材料
2014/12/30 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript