개발관련/javascript&jquery

[Jquery/Javascript] 핸드폰번호 정규식 및 숫자만 입력되게 하는법

🐻곰이🐻 2022. 8. 2.

728x90

안녕하세요 개발쉽게하자곰 입니다.

날씨가 많이 우중충하네요 어제는 번개까지 치던데... 후 너무 찝찝한 하루에요 ㅠㅠ

회원가입이나 따로 핸드폰 번호를 입력받아야 할 때 많이 사용되는 방법에 대해 공유드리고자 합니다.

핸드폰 번호 검증과 정규식

우선 010/1234/5678 관련해서 각각 따로 입력받아 하나로 합치는 건데요 ㅎㅎ

이렇게요 ㅎㅎ

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					alert($("#phone1").val());
				});
			});
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3'>
		<input type="text" name="phone2" id="phone2" maxlength='4'>
		<input type="text" name="phone3" id="phone3" maxlength='4'>
		<button>출력</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

이렇게 하나씩 출력하면서 셀렉터를 잡아줍니다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//필수값 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("필수값 누락!");
						return false;
					}
					
					var phone_number = phone1 + phone2 + phone3;

					$("#phone_number").val(phone_number);

				});
			});
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3'>
		<input type="text" name="phone2" id="phone2" maxlength='4'>
		<input type="text" name="phone3" id="phone3" maxlength='4'>
		<button>출력</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

필수 값 체크도 해줬습니다.

그런데 전화번호 같은 경우엔 - (하이픈) 이 붙어야 한다면.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//필수값 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("필수값 누락!");
						return false;
					}
					
					var phone_number = phone1 + "-" + phone2 + "-" + phone3;

					$("#phone_number").val(phone_number);

				});
			});
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3'>
		<input type="text" name="phone2" id="phone2" maxlength='4'>
		<input type="text" name="phone3" id="phone3" maxlength='4'>
		<button>출력</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

이런 식으로 해주면 됩니다.

저는 여기서 input box에 숫자만 입력받게끔 하겠습니다.

이 방법도 좋지만 복붙에 취약합니다.

가볍게 보여드리자면

이렇게 onkeyup이기에 키업을 안 한 상태로 입력하게 되면 받게 되죠

저는 이런 부분들이 싫어서 다른 방식으로 하려고 합니다.

oninput을 쓸 겁니다

oninput이란?

oninput

oninput 이벤트는 요소가 사용자 입력을 받을 때 발생합니다.

이 이벤트는 <input> 또는 <textarea> 요소의 값이 변경될 때 발생합니다.

한마디로 입력받을 즉시 onkeydown과 onkeyup사이?라고 생각하시면 됩니다.

값이 들어올 때라고 보시면 됩니다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//필수값 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("필수값 누락!");
						return false;
					}

					var phone_number = phone1 + "-" + phone2 + "-" + phone3;

					$("#phone_number").val(phone_number);

				});

			});
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<input type="text" name="phone2" id="phone2" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<input type="text" name="phone3" id="phone3" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<button>출력</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

그리고 저는 010을 입력했을 때 다음 inputbox로 포커싱 되게 처리해보려고 합니다. 편하니까요

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//필수값 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("필수값 누락!");
						return false;
					}

					var phone_number = phone1 + "-" + phone2 + "-" + phone3;

					$("#phone_number").val(phone_number);

				});

			});
			
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" onkeyup="if(this.value.length == 3) $('#phone2').focus();">
		<input type="text" name="phone2" id="phone2" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" onkeyup="if(this.value.length == 4) $('#phone3').focus();">
		<input type="text" name="phone3" id="phone3" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<button>출력</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

포커싱 처리 후입니다.

간단히 보여드리자면

처음엔 3글자 입력하고 다음 인풋 박스로 다음엔 4글자 입력 시 자동으로 넘어가게 됩니다.

중간점검 시간

보고 계시는 여러분들도 한번 해보세요 ㅎㅎ

easy-developmentbear

그다음에 해야 하는 것은 이게 진짜 전화번호가 맞는가? 아닌가? 확인입니다.

예를 들어 089로 시작하는 번호는 없으니까요

우리나라 핸드폰 번호는 010,016,011,017,018,019 정도가 있겠습니다.

다 바뀐다고 했던 거 같은데 혹시나.. 혹시나 해서 검증을 하겠습니다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("#submit").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//필수값 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("필수값 누락!");
						return false;
					}
					//정규식
					var regPhone = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

					//번호 합치기
					var phone_number = phone1 + "-" + phone2 + "-" + phone3;
					
					//번호검증
					if(!regPhone.test(phone_number))
					{
						alert("잘못된 번호입니다.");
						return false;
					}

					$("#phone_number").val(phone_number);

				});

			});
			
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" onkeyup="if(this.value.length == 3) $('#phone2').focus();">
		<input type="text" name="phone2" id="phone2" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" onkeyup="if(this.value.length == 4) $('#phone3').focus();">
		<input type="text" name="phone3" id="phone3" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<button id="submit">출력</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

위 코드는 최종 코드입니다.

easy-developmentbear

전화번호가 맞는지 아닌지 확인해보시면 됩니다.

이렇게 핸드폰 번호 정규식과 숫자만 입력받고 자동 포커싱 처리까지 해봤는데요 ㅎㅎ

다음에 시간 나면 이메일도 해봐야겠어요 재밌네요 정규식 알아놓으면 알아둘수록 좋은..ㅎㅎ

다음에 더 좋은 정보로 찾아뵐게요 ㅎㅎ 다들 좋은 하루 보내세요!

저작자표시 비영리 변경금지

'개발관련 > javascript&jquery' 카테고리의 다른 글

Counter.js 를 써서 티스토리 블로그 방문자 수 애니메이션 효과 넣기 (2)	2022.08.19
[Jquery/Javascript] 체크박스 전체 선택과 전체 해제 구현하기 (0)	2022.08.02
[html/css/javascript/jquery] 셀렉터(Selector) 활용법! (0)	2020.11.25
Javascript & Jquery / "onblur" 속성으로 1000단위 콤마찍기! (0)	2020.11.24
[Javascript/Jquery] 제이쿼리로 천 단위 콤마 (1,000) 세자리마다 콤마찍기! (0)	2020.11.24
javascript/jquery 활용해서 간편 계산기 만들기! (0)	2020.11.24

[Jquery/Javascript] 핸드폰번호 정규식 및 숫자만 입력되게 하는법

핸드폰 번호 검증과 정규식

'개발관련 > javascript&jquery' 카테고리의 다른 글

댓글

티스토리툴바