JavaScript에서 입력된 날짜가 유효한 형식인지 확인하려면 정규 표현식(Regular Expression)을 사용하여 날짜 문자열이 올바른 패턴과 일치하는지 검사할 수 있습니다. 이 글에서는 YYYY-MM-DD 형식의 날짜를 검증하는 방법을 예제와 함께 살펴보겠습니다.
정규 표현식으로 날짜 형식 검사하기
유효한 날짜 형식(YYYY-MM-DD)을 확인하려면 아래 정규식과 날짜를 비교합니다 −
const dateFormat = /^\d{4}\-\d{2}\-\d{2}$/;이 정규식은 4자리 연도, 2자리 월, 2자리 일로 구성된 "2024-03-31"과 같은 문자열만 유효한 것으로 판단합니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>유효한 날짜 형식 확인</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.check-valid-date {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="date" id="check-valid-date" class="form-control calender-black" name="dateCalender">
<script>
const dateFormat = /^\d{4}\-\d{2}\-\d{2}$/;
document.getElementById("check-valid-date").addEventListener("change", checkingForValidDate);
function checkingForValidDate() {
console.log(this.value, dateFormat.test(this.value));
this.classList.toggle('check-valid-date', dateFormat.test(this.value));
}
</script>
</body>
</html>코드 설명
위 예제의 핵심 로직은 다음과 같습니다.
1. dateFormat: YYYY-MM-DD 패턴을 검사하는 정규식입니다.
2. addEventListener("change", ...): 날짜 입력 필드의 값이 변경될 때마다 검사 함수가 실행됩니다.
3. dateFormat.test(this.value): 입력된 값이 정규식 패턴과 일치하면 true, 그렇지 않으면 false를 반환합니다.
4. classList.toggle(): 날짜 형식이 유효할 경우 입력 필드에 빨간색 테두리 스타일을 적용합니다.
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 됩니다.
실행 결과
위 프로그램을 실행하면 다음과 같은 화면이 출력됩니다 −
이제 날짜를 하나 선택해 보겠습니다. 날짜 선택 후의 화면은 다음과 같습니다 −
위 결과에서 콘솔에 TRUE가 출력되었으며, 이는 선택한 날짜가 유효한 형식(YYYY-MM-DD)임을 의미합니다. 만약 잘못된 형식의 값이 입력되면 false가 반환되고, 입력 필드에 빨간색 테두리가 표시되어 시각적으로 오류를 확인할 수 있습니다.