修改jQuery Validation里默认的验证方法


Posted in Javascript onFebruary 14, 2012

在最近做的一个项目中,使用jQuery Validation验证日期,遇到的问题和一个没有预料到的情况是,在ASP.NET MVC 3的项目中,对于 <input type="date" data-val="true" />的元素,如果调用form的valid方法验证form,虽然我没有添加日期验证的设置,仅仅type="date",但其依然调用了日期验证逻辑来验证日期格式是否正确。这本来是个不错的行为,但问题在于,其支持的日期格式有限,阅读jQuery Validation的代码会知道(当然,文档中也有说明),对于“date”,日期验证只是利用Javascript内置的处理来验证,反映到代码里,就是看new Date(日期字符串)能否成功。在我的电脑中,输入日期"9/5/2012"可以验证通过,但“2012-9-5”验证失败,后者显然也是一种正确的格式。我需要改变或者改善这种行为。如何做?

当然,我们可以修改jQuery Validation的源代码,但是首先,我引用的是CDN上的代码,其次,作为一个public的库,我想还是尽量不要自己去改动,日久天长,可能我们已经忘记了对它的修改,而官方更新新版本时,我们弄下来更新,结果就把我们自己的修改给覆盖了。更好的办法,是打补丁,从外部把date的验证函数替换成我们自己的。这里或许要感谢Javascript的OO还不是那么彻底,并没有把那些内置验证方法整成protected/private,看了源代码之后,替换的方法很简单,在引用jQuery Validation的源码之后,再这样替换:

$.validator.methods.date = function (value, element) 
{ 
// Date.parse函数源自另外一个处理日期的库 
return this.optional(element) || Date.parse(value) != null; 
};

此外替换默认的message,也可以用同样的办法,比如:
$.validator.messages.date = "hey, you entered an invalid date"

当然,处理messages有其他支持的更好的办法,这在jQuery Validation的全球化和本地化的说明中有提及。
Javascript 相关文章推荐
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 #Javascript
js 金额文本框实现代码
Feb 14 #Javascript
jQuery UI Autocomplete 体验分享
Feb 14 #Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 #Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 #Javascript
情人节之礼 js项链效果
Feb 13 #Javascript
jQuery.getScript加载同域JS的代码
Feb 13 #Javascript
You might like
德生PL550的电路分析
2021/03/02 无线电
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
破解Session cookie的方法
2006/07/28 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
治超工作实施方案
2014/05/04 职场文书
最常使用的求职信
2014/05/25 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书