[JavaScript] 날짜 유효성 검사 정리 (시작일/종료일)

오늘 검색 조건에 들어가는 날짜 유효성 검사 관련해서 배운 내용을 정리해본다.

처음엔 단순히 시작일이 종료일보다 크면 안 된다는 조건만 체크했는데,

실무에서는 훨씬 더 많은 걸 체크해야 한다는 걸 알게 됐다.

 

1. 기본적인 날짜 체크

시작일/종료일 관련해서 제일 기본적으로 체크해야 하는 것들:

function validateDateRange() {
    // 1. 날짜 포맷 변환 (2024-01-01 형태로)
    const startDate = formatDate($('#startDate').val());
    const endDate = formatDate($('#endDate').val());
    
    // 2. 필수값 체크
    if(!$.trim($("#startDate").val()) || !$.trim($("#endDate").val())) {
        alert('날짜를 입력해주세요.');
        return false;
    }
    
    // 3. 시작일이 종료일보다 큰지 체크
    if(endDate < startDate) {
        alert('종료일이 시작일보다 작을 수 없습니다.');
        return false;
    }
    
    return true;
}

 

근데 실제로 운영하다 보니까 이것만으로는 부족했다.

 

2. 다중 날짜 범위 체크

예를 들어 등록일자, 수정일자처럼 여러 쌍의 날짜가 있을 때는 각각 따로 체크해야 한다:

// 등록일자 체크
if(regStartDate != "" && regStartDate != null) {
    if(regEndDate == null || regEndDate == "") {
        alert('등록 종료일자를 입력해주세요.');
        $("#regEndDate").focus();
        return false;
    }
}

// 수정일자 체크
if(modStartDate != "" && modStartDate != null) {
    if(modEndDate == null || modEndDate == "") {
        alert('수정 종료일자를 입력해주세요.');
        $("#modEndDate").focus();
        return false;
    }
}

 

3. 검색 기간 제한

성능 이슈 때문에 검색 기간을 제한해야 할 때가 있다.

처음엔 이런 걸 왜 하나 싶었는데, 실제로 대용량 데이터를 다루다 보니 필요성을 깨달았다.

// 한 달 이내의 기간만 조회 가능하도록 체크
const searchStart = new Date($('#startDate').datepicker('getDate').getTime());
const searchEnd = new Date($('#endDate').datepicker('getDate').getTime());

// 시작일에 30일을 더한 날짜 계산
const maxDate = new Date(searchStart.getTime() + (1000 * 60 * 60 * 24 * 30));

if(searchEnd > maxDate) {
    alert('조회 기간은 최대 1개월까지만 가능합니다.');
    return false;
}

 

 

✅ 메모

1. 사용자 입력값은 항상 trim() 처리하기
   • 공백 하나 때문에 validation이 실패하는 경우가 있었다
2. 포커스 처리도 중요함
   • 에러 발생시 해당 입력창으로 포커스 이동시켜주면 UX가 좋아진다
3. 날짜 형식 통일하기
   • 백엔드와 날짜 포맷을 맞춰야 하는데, 이게 생각보다 귀찮다
   • formatDate() 같은 유틸 함수를 만들어두면 편함

 

🔍 다음에 정리할 것

• datepicker 관련 설정들
• 공휴일 체크 로직
• UTC/로컬시간 관련 이슈들...

이렇게 정리하고 보니 날짜 처리가 은근히 신경 쓸 게 많다.

근데 한 번 제대로 해두면 다른 프로젝트에서도 계속 쓸 수 있어서 좋다.