JavaScript에서 날짜 유효성 검사

Sahil Bhosale 2023년10월12일
  1. JavaScript에서moment.js라이브러리로 날짜 유효성 검사
  2. JavaScript에서 정규식을 사용하여 날짜 유효성 검사
  3. JavaScript에서Date.parse()메서드를 사용하여 날짜 유효성 검사
JavaScript에서 날짜 유효성 검사

날짜 유효성 검사는 날짜를 입력하는 동안 다양한 위치의 다양한 사람들이 다른 형식을 따르기 때문에 JavaScript에서 날짜 유효성을 검사하는 데 중요합니다. 웹 응용 프로그램에서 날짜를 확인하는 동안 특정 형식을 따라야 나중에 날짜 작업이 더 쉬워집니다.

이 기사에서는 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 개의 그룹이 있습니다. 첫 번째 그룹은을, 두 번째 그룹은을, 세 번째 그룹은연도의 마지막 2 자리를 나타냅니다. 슬래시/가 표시 될 때마다 그룹의 시작을 나타내고 백 슬래시\는 그룹의 끝을 나타냅니다.

1 년에는 12 개월이 있습니다. 월을 선택할 때 두 가지 가능성이 있습니다.0으로 시작하여 숫자가 오거나1다음에 숫자1또는2가 오도록 할 수 있습니다. 다른 그룹에서도 동일한 프로세스가 유사합니다. 그룹 초의\d0-9사이의 모든 숫자를 나타냅니다. 날짜 유효성 검사를위한 정규식을 만들 수도 있습니다.

그런 다음이 정규식을date_regex변수에 저장합니다. myDate에 저장된 날짜를 사용하여 날짜가dd/mm/yy형식을 따르는 지 확인합니다. 날짜가이 형식을 따르는 경우 콘솔 내부에Date follows dd/mm/yy 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 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