网站首页 > 知识剖析 正文
技术背景
在JavaScript里,创建日期对象时可能会得到无效的日期实例,像 new Date('foo') 。所以,准确检测日期对象是否有效是很重要的。
实现步骤
1. 基本方法
借助
Object.prototype.toString.call 与 isNaN 来检测:
if (Object.prototype.toString.call(d) === "[object Date]") {
// 它是一个日期对象
if (isNaN(d)) { // d.getTime() 或 d.valueOf() 也可以
// 日期对象无效
} else {
// 日期对象有效
}
} else {
// 不是日期对象
}
2. 简化方法
若不考虑来自其他JS上下文的日期对象,可采用如下更简单的形式:
function isValidDate(d) {
return d instanceof Date && !isNaN(d);
}
3. 利用 Date.parse方法
使用 Date.parse 解析日期字符串并检查结果:
var timestamp = Date.parse('foo');
if (isNaN(timestamp) == false) {
var d = new Date(timestamp);
}
4. 自定义方法
给 Date 原型添加 isValid 方法:
Date.prototype.isValid = function () {
// 无效的日期对象调用 getTime() 会返回 NaN,而 NaN 是唯一与自身不严格相等的对象
return this.getTime() === this.getTime();
};
var d = new Date("lol");
console.log(d.isValid()); // false
d = new Date("2012/09/11");
console.log(d.isValid()); // true
5. 最简方法
使用 isNaN 或 isFinite 直接检查:
// 检查无效日期
isNaN(date);
// 检查有效日期
!isNaN(date);
// 或者
isFinite(date);
在TypeScript中:
isFinite(+date);
6. 其他方法
利用 toString方法
function isValidDate(dateObject) {
return new Date(dateObject).toString() !== 'Invalid Date';
}
使用 moment.js
var m = moment('2015-11-32', 'YYYY-MM-DD');
m.isValid(); // false
使用 jQuery UI DatePicker
var stringval = '01/03/2012';
var testdate;
try {
testdate = $.datepicker.parseDate('mm/dd/yy', stringval);
} catch (e) {
alert(stringval + ' is not valid. Format must be MM/DD/YYYY ' +
'and the date value must be valid for the calendar.');
}
自定义日期验证函数
function isDate(txt) {
var matches = txt.match(/^\d?\d\/(\d?\d)\/\d{4}$/);
return !!matches && !!Date.parse(txt) && new Date(txt).getDate() == matches[1];
}
核心代码
下面是一些核心代码示例:
// 检查日期对象是否有效
function isValidDate(d) {
return d instanceof Date && !isNaN(d);
}
// 给 Date 原型添加 isValid 方法
Date.prototype.isValid = function () {
return this.getTime() === this.getTime();
};
// 检查日期字符串是否有效
function isDate(txt) {
var matches = txt.match(/^\d?\d\/(\d?\d)\/\d{4}$/);
return !!matches && !!Date.parse(txt) && new Date(txt).getDate() == matches[1];
}
最佳实践
- 若项目里已经使用了 moment.js 或 date-fns 这样的日期处理库,建议使用它们提供的日期验证方法,因为这些方法功能更强大,兼容性也更好。
- 若要验证日期字符串,可结合正则表达式与 Date.parse 方法,以此确保日期格式与有效性。
- 尽量避免直接使用 new Date() 来解析日期字符串,因为它在不同浏览器和环境下可能有不同的解析结果。
常见问题
- 跨框架问题:使用 instanceof 检查日期对象时,可能会出现跨框架问题。可使用 Object.prototype.toString.call 替代。
- 日期格式问题:JavaScript 的 Date 对象能解析多种日期格式,不过不同浏览器的解析结果可能不同。建议使用统一的日期格式,并结合正则表达式进行验证。
- 闰年问题:在验证日期时,要考虑闰年的情况,比如 2 月 29 日。可通过检查年份是否为闰年,再验证日期的有效性。
猜你喜欢
- 2025-06-04 记一次实战给朋友站点测试(测试站点是什么意思)
- 2025-06-04 详细讲解性能测试(详细讲解性能测试题)
- 2025-06-04 [实战] cursor +claude-3.7+ go 实现批量网站敏感词检测
- 2025-06-04 Python最强大测试框架pytest(pytest框架原理)
- 2025-06-04 接口自动化的关键思路和解决方案,看完不会你捶我
- 2025-06-04 pytest测试框架pytest-cov插件生成代码覆盖率
- 2025-06-04 pytest单元测试框架(pytest框架设计)
- 2025-06-04 Pytest入门指南:轻松学会高效测试框架
- 2025-06-04 测试员进阶技能:如何有效地利用单元测试报告?
- 2025-06-04 测试开发必知必会:Pytest框架实战
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)