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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
详解js的视频和音频采集
Aug 09 Javascript
javascript实现时钟动画
Dec 03 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
详解VSCode配置启动Vue项目
2019/05/14 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
pandas值替换方法
2018/07/10 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
铭立家具面试题
2012/12/06 面试题
DTD的含义以及作用
2014/01/26 面试题
行政办公员自我评价分享
2013/12/14 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
起诉意见书范文
2015/05/19 职场文书
欠款证明
2015/06/24 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python