JavaScript - 日期验证

在 JavaScript 中，我们可以验证日期。日期应该采用特定格式或特定范围，并且有效。

为什么要验证日期?

让我们通过示例来理解为什么需要在 JavaScript 中验证日期。假设您开发了一个应用程序，需要从用户提交的表单中获取一些信息。用户可能会犯错。如果他们在输入框中输入了错误的日期怎么办?在这种情况下，开发人员需要验证日期。

这里，我们有三种不同的方法在 JavaScript 中验证日期。

• 使用 getTime() 方法
• 使用 isFinite() 方法
• 使用 Moment.js 的 isValid() 方法
• 使用正则表达式检查日期格式

使用 getTime() 方法

在 JavaScript 中，我们可以通过创建 Date() 类的对象来创建新的日期。我们可以将 Date 类的不同方法应用于日期对象。在本方法中，我们将使用 date 类的 getTime() 方法来验证日期。

我们将检查变量的类型。如果变量是 Date 对象类型，我们将检查日期变量的 getTime() 方法是否返回数字。 getTime() 方法返回自 1970 年 1 月 1 日以来的总毫秒数。如果没有返回该数字，则表示日期无效。

语法

用户可以按照以下语法使用 getTime() 方法验证日期。

if ( Object.prototype.toString.call(date) === "[object Date]" ) {
   if ( !isNaN(date.getTime()) ) {
      // 日期有效
   } else {
      //日期无效
    }
} else {  
   // 日期无效
}

参数

用户可以按照以下参数使用 getTime() 方法验证日期。

• date:它是一个日期变量，并且始终必需。

示例

在下面的示例中，我们创建了一个有效日期和另一个无效日期。我们创建了 isValid() 函数来验证日期。在该函数中，我们检查对象类型是否为 Date。此外，我们还使用 isNaN() 方法检查 getTime() 方法是否返回数字。

<html>
<head>
</head>
<body>
<h2> check whether a JavaScript date is valid. </h2>
<h4> Validate the date object using <i>getTime() </i> method. </h4>
<p id = "validate"> </p>
<script>
let validate = document.getElementById("validate");
function isValid(date) {
   if ( Object.prototype.toString.call(date) === "[object Date]" ) {
      if ( !isNaN(date.getTime()) ) {
         validate.innerHTML += date + " is valid. <br/> ";
      } else {
         validate.innerHTML += date + " is not valid. <br/> ";
      }
   } else {
      validate.innerHTML += date + " is not valid. <br/> ";
   }
}
let date = new Date("No date");
isValid(date);
date = new Date();
isValid(date);
</script>
</body>
</html>

使用 isFinite() 方法

在 JavaScript 中，instanceof 运算符允许我们检查变量是否是 Date() 类的实例。我们首先会检查这一点，如果是，则检查 getTime() 方法是否返回有限毫秒数。

如果日期变量不是 Date 对象类型，或者 getTime() 方法返回的是其他值而非数字，则返回 false。

语法

用户可以按照以下语法使用 isFinite() 方法验证日期

if ( date instanceof Date && isFinite(date) ) {
    // 日期有效
} else {
    // 日期无效
}

示例

在下面的示例中，我们使用了 instanceof 运算符来检查 if-else 条件中的变量类型是否为日期。此外，我们还使用了 isFinite() 方法来检查毫秒数是否有限。我们针对不同的日期进行了测试，用户可以在下面示例的输出中看到结果。

<html>
<head>
</head>
<body>
<h2> check whether a JavaScript date is valid. </h2>
<h4> Validate the date object using <i>isFinite() </i> method. </h4>

<p id = "validate"> </p>
<script>
let validate = document.getElementById("validate");
function isValid(date) {
   if ( date instanceof Date && isFinite(date) ) {
      validate.innerHTML += date + " is valid. <br/> ";
   } else {
      validate.innerHTML += date + " is not valid. <br/> ";
   }
}
let date = new Date("No date");
isValid(date);
date = new Date();
isValid(date);
</script>
</body>
</html>

使用正则表达式检查日期格式

在 JavaScript 中，我们可以使用正则表达式验证日期格式。我们可以检查日期是否符合 YYYY-MM-DD 格式。我们可以使用正则表达式的 test() 方法来检查日期格式。

语法

用户可以使用以下语法通过正则表达式验证日期格式。

let date = "2022-07-32";
let reg = /^\d{4}-\d{2}-\d{2}$/;
let valid = reg.test(date);

示例

在下面的示例中，我们创建了正则表达式来检查日期格式。我们创建了两个日期，一个格式正确，另一个格式错误。我们使用正则表达式的 test() 方法来验证日期格式。

<html>
<head>
</head>
<body>
<h2> check whether a JavaScript date is valid. </h2>
<h4> Validate the date object using <i>Regular Expression </i> method. </h4>
<p id = "validate"> </p>
<script>
let validate = document.getElementById("validate");
let date = "2022-07-32";
let reg = /^\d{4}-\d{2}-\d{2}$/;
let valid = reg.test(date);
if (valid) {
   validate.innerHTML += date + " is valid. <br/> ";
} else {
   validate.innerHTML += date + " is not valid. <br/> ";
}
date = "2022-07-31";
valid = reg.test(date);
if (valid) {
   validate.innerHTML += date + " is valid. <br/> ";
} else {
   validate.innerHTML += date + " is not valid. <br/> ";
}
</script>
</body>
</html>

总结

在本教程中，我们学习了如何在 JavaScript 中验证日期。我们使用了不同的方法来验证日期。我们使用了 getTime() 方法、isFinite() 方法、Moment Js 的 isValid() 方法以及正则表达式来验证日期。我们还学习了每种方法的日期验证示例。