在 JavaScript 中驗證日期

Sahil Bhosale 2023年10月12日
  1. 使用 JavaScript 中的 moment.js 庫驗證日期
  2. 在 JavaScript 中使用正規表示式驗證日期
  3. 在 JavaScript 中使用 Date.parse() 方法驗證日期
在 JavaScript 中驗證日期

在 JavaScript 中驗證日期變得很重要,因為位於不同位置的各個人在輸入日期時遵循不同的格式。在 Web 應用程式中驗證日期時,我們必須遵循特定的格式,以便以後使用日期變得更加容易。

本文將介紹如何在 JavaScript 中以 mm/dd/yy 格式驗證日期。

使用 JavaScript 中的 moment.js 庫驗證日期

moment.js 庫是在 JavaScript 中驗證和格式化日期和時間的最佳,最簡便的方法。我們將使用此庫在 JavaScript 中驗證和顯示日期。要使用此庫,我們首先必須使用以下命令下載它。

npm install -g moment --save 

它將在你的系統中安裝一會兒。然後,我們可以直接使用 moment.js 庫中提供的 moment() 方法。以下是在 JavaScript 中使用 moment.js 驗證日期的程式碼。

import * as moment from 'moment';

let result = moment('05/22/12', 'MM/DD/YY', true).isValid();
console.log(result)

輸出:

true

moment 函式採用三個引數作為輸入。第一個是我們要驗證的輸入日期,第二個是我們希望日期遵循的格式,最後一個引數是可選的;如果將其設定為 true,則將使用嚴格解析。嚴格的分析要求格式和輸入(包括定界符)完全匹配。最後,我們使用 isValid() 函式檢查輸入日期是否有效,如果輸入日期與格式 dd/mm/yy 匹配,則返回布林值 true,如果與日期匹配,則返回 false。輸入的日期與指定的格式不匹配。

在 JavaScript 中使用正規表示式驗證日期

正規表示式是驗證日期的好方法。對於正規表示式,許多人面臨的唯一問題是難以理解它們,因為它們包含各種符號和數字。正規表示式中的每個符號或表示式都有其自己的含義。使用這些表示式,我們可以在 JavaScript 中以 dd/mm/yy 格式驗證日期。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1 id="message"></h1>
    <script>
      
      var date_regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[1-9]|2[1-9])$/;
        var testDate = "03/17/21"
        if (date_regex.test(testDate)) {
            document.getElementById("message").innerHTML = "Date follows dd/mm/yy format";
        }
        else{
          document.getElementById("message").innerHTML = "Invalid date format";
        }

    </script>
  </body>
</html>

在瀏覽器中輸出:

Date follows dd/mm/yy format

正規表示式/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[1-9]|2[1-9])$/具有 3 個組。第一組代表,第二組代表,第三組代表的後兩位。無論在何處看到正斜槓/,它都代表該組的開始,而反斜槓\則代表該組的結束。

一年有 12 個月。因此,選擇月份時有兩種可能性,可以以 0 開頭,後跟數字,或者以 1 開頭,後跟數字 12。對於其他組來說,相同的過程是相似的。第二組中的\d 表示 0 到 9 之間的任何數字。你也可以建立用於驗證日期的正規表示式。

然後,我們將此正規表示式儲存在 date_regex 變數中。我們將使用儲存在 myDate 中的日期來檢查日期是否遵循 dd/mm/yy 格式。如果日期遵循此格式,我們將在控制檯內列印 Date follows dd/mm/yy format;否則,我們將列印 Invalid date format

在 JavaScript 中使用 Date.parse() 方法驗證日期

Data.parse() 是 JavaScript 中已經可用的方法。這個方法只接受一個日期作為單一引數,是一個字串。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1 id="message"></h1>

    <script>
        let isValidDate = Date.parse('03/17/21');

        if (isNaN(isValidDate)) {
          document.getElementById('message').innerHTML = "This is not a valid date format.";
        }
        else{
          document.getElementById('message').innerHTML = "This is a valid date format.";
        }

    </script>
  </body>
</html>

在瀏覽器中輸出:

This is a valid date format.

Data.parse() 函式將根據提供的輸入日期返回以毫秒為單位的數字。如果無法識別輸入日期,則它將返回 NaN(不是數字)作為輸出。該函式的結果儲存在 isValidDate 變數中。

如果 isValidDate 變數內的值為 NaN(不是數字),它將返回 false,並且將在螢幕上顯示的訊息為 This is a not valid date format.。如果返回 true,則將列印訊息 This is a valid date format. 在螢幕上作為輸出。

作者: Sahil Bhosale
Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

相關文章 - JavaScript DateTime