如何在JavaScript中驗證日期模式？

在本教程中，我們將學習如何在JavaScript中驗證日期模式。

JavaScript中的Date物件以平臺無關的方式表示單個時間點。它包含一個數字，表示自1970年1月1日00:00:00（UTC）以來的毫秒數。Date物件的格式可能不同，因此在使用之前驗證日期模式至關重要。

在本教程中，我們將討論兩種在JavaScript中驗證日期模式的方法：

  • 使用getTime()方法
  • 使用Date建構函式和split()方法

使用getTime()方法驗證日期模式

在JavaScript中，getTime()方法返回自1970年1月1日00:00:00（UTC）以來的毫秒數。首先，我們透過在Date建構函式中傳遞日期模式來建立一個JavaScript日期物件，然後我們呼叫其上的getTime()方法。如果提供的模式無效，此方法將返回NaN（非數字）。

語法

const isValid = new Date('14/14/2022').getTime()
console.log(isValid) //NaN
if (isNaN(isValid)) {
   console.log('Date pattern is invalid')
} else {
   console.log('Date pattern is valid')
}

在上面的語法中，我們使用日期模式“14/14/2022”建立一個Date物件並使用getTime()方法。之後，使用isNaN()方法檢查getTime()方法的返回值是否為NaN。如果值為NaN，則日期模式無效。

示例

在下面的示例中，我們驗證JavaScript中的多個日期模式。“驗證”按鈕與單擊事件相關聯，每當使用者單擊該按鈕時，都會觸發validatePattern()函式。此函式使用Date建構函式和getTime()方法來驗證日期模式。

<html>
<head>
   <style>
      .element {
         padding: 15px;
         margin-top: 5px;
         background-color: rgb(169, 231, 224);
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h2>Validating the date pattern with JavaScript using the<i>getTime() method</i></h2>
   <button onclick = "validatePattern()">Validate</button>
   <div id = "element1" class = "element">1/1/2022</div>
   <div id = "element2" class = "element">14/14/2022</div>
   <div id = "element3" class = "element">10-10-2000</div>
   <div id = "element4" class = "element">32-32-2000</div>
   <div id = "element5" class = "element">January 1 2022</div>
   <div id = "element6" class = "element">January 35 2022</div>
   <script>
      // All elements
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      const element4 = document.getElementById('element4')
      const element5 = document.getElementById('element5')
      const element6 = document.getElementById('element6')

      // All date patterns
      const date1 = '1/1/2022'
      const date2 = '14/14/2022'
      const date3 = '10-10-2000'
      const date4 = '32-32-2000'
      const date5 = 'January 1 2022'
      const date6 = 'January 35 2022'

      // "Validate" button click event handler function
      function validatePattern() {
         element1.innerHTML = date1 + ' = ' + validate(date1)
         element2.innerHTML = date2 + ' = ' + validate(date2)
         element3.innerHTML = date3 + ' = ' + validate(date3)
         element4.innerHTML = date4 + ' = ' + validate(date4)
         element5.innerHTML = date5 + ' = ' + validate(date5)
         element6.innerHTML = date6 + ' = ' + validate(date6)
      }
      function validate(pattern) {
         const isValid = new Date(pattern).getTime()
         if (isNaN(isValid)) {
            return 'invalid'
         } else {
            return 'valid'
         }
      }
   </script>
</body>
</html>

使用Date建構函式和split()方法驗證日期模式

在這種方法中，我們採用日期模式並使用split()方法將其拆分為陣列；然後，我們使用陣列元素建立一個JavaScript日期物件。之後，我們使用日期模式檢查日期物件的月份、日期和年份。如果Date物件無效或日期、月份或年份與日期模式不匹配，則應將日期模式視為無效。此方法僅可用於“MM/DD/YYYY”型別的日期模式。

語法

function validate(date) {
   var split = date.split('/')
   var date = new Date(split[2] + '/' + split[0] + '/' + split[1])
   return (
      date &&
      date.getMonth() + 1 == split[0] &&
      date.getDate() == Number(split[1]) &&
      date.getFullYear() == Number(split[2])
   )
}

在上面的語法中，validate函式使用Date建構函式和split方法來驗證日期模式。

示例

在下面的示例中，我們使用Date建構函式和split方法使用JavaScript驗證日期模式。首先，使用者可以在輸入欄位中輸入他們的日期模式。然後，使用一個“驗證”按鈕，該按鈕在單擊事件上執行“validate()”函式。此函式驗證使用者輸入的日期模式並顯示輸出。

<html>
<body>
   <h2>Validating the date pattern with JavaScript using the<i>the Date constructor</i> and <i>the split method</i></h2>
   <h4>Enter the date pattern:</h4>
   <input type="text" id="date-pattern" name="date-pattern" value = "11/07/2022"/>
   <button onclick = "validatePattern()"> Validate </button>
   <div
      id="root"
      style="padding: 15px; margin-top: 5px; background-color: rgb(169, 231, 224); border: 1px solid black;">
   </div>
   <script>

      // "Validate" button click event handler function
      function validatePattern() {
         // user input value
         const date_pattern = document.getElementById('date-pattern').value
         const root = document.getElementById('root')
         root.innerHTML = date_pattern + ' = ' + validate(date_pattern)
      }
      function validate(date) {
         var split=date.split('/')
         var date = new Date(split[2] + '/' + split[0] + '/' + split[1])
         return (
            date &&
            date.getMonth() + 1 == split[0] &&
            date.getDate() == Number(split[1]) &&
            date.getFullYear() == Number(split[2])
         )
      }
   </script>
</body>
</html>

在本教程中，我們學習瞭如何使用JavaScript驗證日期模式。我們討論了兩種方法：getTime()方法和Date建構函式以及split()方法。使用者可以根據需要遵循任何一種方法。

更新於：2022年10月31日

506 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.