[javascript] 날짜(년/월/일) 유효성 검사

■ 년/월/일 유효성 검사(Validation Check)

생년월일, 구매일자 등
현재날짜를 넘어선 안되는 날짜항목에 쓸 수 있는 유효성검사
(+ 해당 연도/월의 마지막 날짜까지 check 가능)

일단 form을 대충 만들어보았습니다.

<form id="form">
  <input type="text" id="year" name="year">년
  <input type="text" id="month" name="month">월
  <input type="text" id="date" name="date">일
</form>

숫자를 입력받아야하는 경우인데, 왜 input type="text"인지는 아래 링크에서 확인
(간단하게는, 입력가능한 문자를 쉽게 걸러내기 위함)

숫자 입력받을 때 number가 아닌 text input이 편한 이유
https://velog.io/@skoh/javascript-input-%EC%88%AB%EC%9E%90%EB%A7%8C-%EC%9E%85%EB%A0%A5

■ 코드

$(document).ready(function(){
	
    //해당 연도/월 의 마지막날짜 이후로는 입력안되게
	$("#form").find('#year, #month, #date').on('keyup', function(){
		let value = $(this).val();
		$(this).val(value.replace(/[^0-9]/gi,''));
        //0-9 숫자 외에 것은 ''로 치환

		let id = $(this).attr('id');
		value = Number(value); 
        //input type="text"로 해놨기 때문에, 아래 비교문을 쓰기 위해서는 Number()를 입혀줘야함

		let date = new Date();  //오늘날짜 변수선언
		
		if(id == 'year'){
			value > date.getFullYear() ? $(this).val('') : value == 0 ? $(this).val('') : '';
		}else if(id == 'month'){				
			value > 12 ? $(this).val('') : value == 0 ? $(this).val('') : '';
		}else if(id == 'date'){
			var lastDate = new Date($("#year").val(),$("#month").val(),0); 
			if(value > lastDate.getDate()){
				$(this).val('');
			} else if(value == 0){
				$(this).val('');
			}
		}

		dateCheck();
	})

	//기본 유효성검사 및 오늘날짜 이후 날짜는 입력안되게
	function dateCheck(){
		let yearBox =$("#form").find('input[name="year"]'); 	//연도 input
		let monthBox = $("#form").find('input[name="month"]'); 	//월 input
		let dateBox = $("#form").find('input[name="date"]'); 	//일 input

		let date 			= new Date();				//오늘날짜
		let currentYear 	= date.getFullYear(); 		// 오늘날짜의 '연도'
		let currentMonth 	= date.getMonth() + 1;  	// 오늘날짜의 '월'
	    let currentDate  	= date.getDate();     		// 오늘날짜의 '일'

		if(yearBox.val() >= currentYear && monthBox.val() >= currentMonth && dateBox.val() > currentDate  {
        //오늘날짜 이후일 경우 일input에 커서focusing하고 value는 지움.
				dateBox .focus();	
				dateBox .val('');										
			
		}
	}
})

부연설명 추가예정