如何检查 JavaScript 日期是否有效?

front end technologyjavascriptweb development

在本教程中,我们将学习如何检查 JavaScript 日期是否有效。

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

这里,我们有三种不同的方法来验证日期。

  • 使用 getTime() 方法

  • 使用 isFinite() 方法

  • 使用 Moment JS isValid() 方法

使用 getTime() 方法

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

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

语法

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

if ( Object.prototype.toString.call(date) === "[object Date]" ) {
   if ( !isNaN(date.getTime()) ) {

      // date is valid
   } else {
      Date is not valid
   }
} else {

   // date is not valid
}

参数

  • date − 它是一个日期变量,始终是必需的。

示例

在下面的示例中,我们创建了一个有效日期和另一个无效日期。我们创建了函数名 isValid() 函数来验证日期。在函数中,我们检查对象类型是否为日期。此外,我们使用 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"); // creating the current date let date = new Date(); 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/> "; } } isValid(date); date = new Date("No date"); isValid(date); </script> </body> </html>

使用 isFinite() 方法

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

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

语法

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

if ( date instanceof Date &&isFinite(date.getTime()) ) {
   
   // date is valid
} else {
   // date is not valid
}

示例

在下面的示例中,我们在 if-else 条件中使用了 instanceof 运算符来检查变量的类型是否为日期。此外,我们还使用了 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) { // check typeof date and check for finite values of date.getTime() method if ( date instanceof Date &&isFinite( date.getTime()) ) { 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>

使用 Moment JS isValid() 方法

在 JavaScript 中,Moment Js 是用于操作日期的特殊库。要使用 Moment JS isValid() 方法验证日期,用户无需付出太多努力。

语法

用户可以使用以下语法来使用 Moment JS 的 isValid() 方法。

let date = moment();
let valid = date.isValid();

示例

在下面的示例中,我们为 Moment Js 库添加了 CDN,以便将其与原始 JavaScript 一起使用。我们使用 moment() 方法创建了两个日期;一个有效,另一个无效。我们使用 isValid() 方法来验证这两个日期。

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment-with-locales.min.js" integrity="sha512-vFABRuf5oGUaztndx4KoAEUVQnOvAIFs59y4tO0DILGWhQiFnFHiR+ZJfxLDyJlXgeut9Z07Svuvm+1Jv89w5g==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> </head> <body> <h2> check whether a JavaScript date is valid. </h2> <h4> Validate the date object using <i> moment.isValid() </i> method. </h4> <p id = "validate"> </p> <script> let validate = document.getElementById("validate"); let date = moment('2015-11-32', 'YYYY-MM-DD'); validate.innerHTML += " 2022-07-32 is valid : " + date.isValid() + "<br/>"; date = moment("2021-11-30", 'YYYY-MM-DD'); validate.innerHTML += " 2021 - 11- 31 is valid : " + date.isValid(); </script> </body> </html>

用户已经了解了三种验证日期的方法。第一种方法和第二种方法比第三种方法花费更多的时间和精力。建议使用 Moment Js 库来操作日期,而不是使用旧的 Date 类。


相关文章