如何在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.