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正则控制input标签只允许输入的值
Jul 29 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
详解从Vue-router到html5的pushState
2018/07/21 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
python palywright库基本使用
2021/01/21 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
什么是方法的重载
2013/06/24 面试题
哈理工毕业生的求职信
2013/12/22 职场文书
岗位职责风险防控
2014/02/18 职场文书
初三学习决心书
2014/03/11 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers
MySQL transaction事务安全示例讲解
2022/06/21 MySQL