Notice
반응형
Recent Posts
250x250
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- input
- Eclipse
- BREW
- SQL
- createBro
- 정처산기
- 이론
- java
- 병행프로세스와 상호배제
- html
- 붙여넣기방지
- Oracle
- txs
- 응용SW
- 이미지용량제한
- react
- script
- 책추천
- 이클립스
- SCIPRT
- IntelliJ
- CSS
- npm
- php version
- node
- jsp
- googleCharts
- js
- googleChart
- TSX
Archives
- Today
- Total
개발하자
[JS] 생년월일 입력하면 만 나이 구하기 본문
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 |