개발하자

[JS] 생년월일 입력하면 만 나이 구하기 본문

TECH STACKS/JSP︲HTML ︲CSS ︲SCRIPT

[JS] 생년월일 입력하면 만 나이 구하기

개발리미 2023. 12. 7. 13:59
728x90

생년월일 입력하면 자동으로 만 나이 계산

 

이용자가 생년월일만 입력하면 만나이가 자동으로 입력되도록 구현해보자

▼ 만 나이 구하는 계산 ▼

1. 올해년도 - 태어난년도 = 나이 

2. 나이 - 1 = 만 나이

3. 생일이 지나면 만 나이 + 1 


1. HTML INPUT

<form>

··· 생략 ···

<tr>
    <th><span class="red" title="필수입력 항목"> *</span>생년월일</th>
    <td colspan="2">
        <input type="text" class="mb_5" style="margin-bottom:3px;" id="r_r_number" name="r_r_number" maxlength="8" required="required" title="생년월일" placeholder="ex)19990217">
        <span class="ml_10 inline_b" style="margin-bottom:3px;">만 <input type="text" id="user_age" name="user_age" value=""> 세 </span>
    </td>
</tr>

··· 생략 ···

<a href="javascript:fn_Form();" class="btn">신청</a>
</form>

 

 

2. SCRIPT

<script>

$(function(){
	// 숫자만 입력
	$('#r_r_number').change(function(){this.value=this.value.replace(/[^0-9]/g,'');});
	
    $(document).on("change", "#r_r_number", function(){
		if($(this).val().length==8){
			var year = $(this).val().substring(0, 4);
			var month = $(this).val().substring(4, 6);
			var day = $(this).val().substring(6, 8);
			var date = new Date();
			var date2 = new Date(year + "-" + month + "-" + day);
			var date3 = new Date(date.getFullYear() + "-" + month + "-" + day);
			
			var user_age = date.getFullYear() - date2.getFullYear();
			
			if(date>=date3){
				user_age++;
			}
			
			user_age--;
			
			$("#user_age").val(user_age);			
		}
	});
});
</script>

 

생년월일을 입력하면 올해년도와 작성한 년도를 빼고,

올해가 생년월일보다 크면 나이에서 1을 더한다 (생년월일이 오늘날짜를 지났다는것을 의미)

그리고 나이에서 1을 빼준다 (만 나이)

 

이렇게 구현하면 생년월일만 넣어도 자동으로 만나이계산

3. TIP

<script>
function fn_Form(){
	var chk = true;
    if(chk == true){
        if($("#user_age").val()<19 || $("#user_age").val()>29){
            alert("만 19세 ~ 29세 의 이용자만 신청 가능합니다.");
            $("#r_r_number").val("");
            $("#r_r_number").focus();
            $("#user_age").val("");
            chk = false;
        }
    }
}
</script>

나이 제한 알림창

 

 

 


공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)

728x90
반응형

'TECH STACKS > JSP︲HTML ︲CSS ︲SCRIPT' 카테고리의 다른 글

[HTML] INPUT 속성 값  (2) 2023.12.11
[HTML] input pattern 정규식  (1) 2023.12.08
[JAVA] jsp에서 DB 쿼리 호출  (0) 2023.11.29
[JS] 스크립트 form submit (onclick)  (0) 2023.11.29
[JS] AJAX 호출  (2) 2023.11.07