Javascript [ CheckValidDate, 만나이 ]

CheckValidDate

• 존재하는 날짜인지 확인
• checkValidDate(날짜)
• true, false 로 결과가 나온다.

---

방법1. class 지정

생년월일 ( HTML )

<li>
 <label>생년월일</label>
 <select class="birthSelect" name="birthYear" 
         									id="birthYear">
 </select>
 <select class="birthSelect" name="birthMonth"
                                            id="birthMonth">
 </select>
 <select class="birthSelect" name="birthDate" 
         									id="birthDate">
 </select>
</li>

만나이

• window.onload

// === 만나이 구하기 시작 === //
const birthSelect_list 
	= document.querySelectorAll("select.birthSelect");
for(let birthSelect of birthSelect_list){
	birthSelect.addEventListener('change',function(){
      // console.log(this.value);	// 출생년도, 출생월, 값
      // console.log(isNan(this.value));	// 숫자유무 파악
     	if(isNan(this.value)){	// 출생년도 등 한글 선택한 경우
			if(birthSelect.id == "birthYear"){
              // this.id 도 가능
            	alert("태어나신 년도를 선택하세요.");
            } else if(this.id == "birthMonth"){
            	alert("태어나신 월을 선택하세요.");
            } else{
            	alert("태어나신 일을 선택하세요.");
            }
          	document.querySelector
            			("나이값넣을장소").innerHTML = "";
        }
    //////////////////////////////////////////////////////
      	else{	// 출생년도, 출생월, 출생일 모두 숫자 기입
        	const birthday
 = document.querySelector("select#birthYear").value + "-"
+ document.querySelector("select#birthMonth").value + "-"
+ document.querySelector("select#birthDate").value;
          
          if(checkValidDate(birthday)){	
            // 달력에 존재하는 날짜라면
          	const age = go_age(birthday);	// 만나이 구하기
            document.querySelector
            			("나이값넣을장소").innerHTML = age;
          }
          
          if(!checkValidDate(birthday)	// 존재하지 않는 날짜 
             && isNan(birthSelect.value)){	// 숫자아닌값 선택
      alert("달력상에 존재하지 않는 날짜를 선택하셨습니다.");
      document.querySelector("나이값넣을장소").innerHTML = "";
          }
        }	// end of 출생년도,출생월,출생일 숫자 입력 유무
    }	// end of birthSelect.addEventListener('change'---
}	// end of for(let birthSelect of birthSelect_list)----

---

방법2. 함수 직접 선언

생년월일 ( HTML )

<li>
 <label>생년월일</label>
 <select name="birthYear" id="birthYear" 
         						onchange="check_date(this)">
 </select>
 <select name="birthMonth" id="birthMonth"
         						onchange="check_date(this)">
 </select>
 <select name="birthDate" id="birthDate" 
         						onchange="check_date(this)">
 </select>
</li>

만나이

• window.onload

function check_date(select){
	if(isNan(this.value)){	// 출생년도 등 한글 선택한 경우
			if(birthSelect.id == "birthYear"){
              // this.id 도 가능
            	alert("태어나신 년도를 선택하세요.");
            } else if(this.id == "birthMonth"){
            	alert("태어나신 월을 선택하세요.");
            } else{
            	alert("태어나신 일을 선택하세요.");
            }
          	document.querySelector
            			("나이값넣을장소").innerHTML = "";
        }
  //////////////////////////////////////////////////////
      	else{	// 출생년도, 출생월, 출생일 모두 숫자 기입
        	const birthday
 = document.querySelector("select#birthYear").value + "-"
+ document.querySelector("select#birthMonth").value + "-"
+ document.querySelector("select#birthDate").value;
          
          if(checkValidDate(birthday)){	
            // 달력에 존재하는 날짜라면
          	const age = go_age(birthday);	// 만나이 구하기
            document.querySelector
            			("나이값넣을장소").innerHTML = age;
          }
          
          if(!checkValidDate(birthday)	// 존재하지 않는 날짜 
             && isNan(birthSelect.value)){	// 숫자아닌값 선택
      alert("달력상에 존재하지 않는 날짜를 선택하셨습니다.");
      document.querySelector("나이값넣을장소").innerHTML = "";
          }
        }	// end of 출생년도,출생월,출생일 숫자 입력 유무
}	// end of function check_date(select)-----------------

---

만나이 구하기 함수

function go_age(birthday){
	const d_birthday = new Date(birthday);	// date 타입
  	const birthYear = d_birthday.getFullYear();	// 출생년도
  	const now = new Date();	// 현재 날짜
  	const currentYear = now.getFullYear();	// 현재년도
  
  	if(d_birthday.getMonth() < now.getMonth()
       || d_birthday.getMonth() == now.getMonth()
       && d_birthday.getDate() < now.getDate()){
    // 생일이 현재날짜 이전인 경우
      	return currentYear - birthYear;	// 현재년도-태어난년도
    }
  	else{
    	return currentYear - birthYear - 1;
    }
}	// end of function go_age(birthday)--------------

---

정리

• 15_form_regular_expression
  -> form_regular_expression.html, form_regular_expression.css, form_regular_expression.js