ふたりで

jquery+javascript 전화번호 자동완성 및 유효성검사 본문

javascript

jquery+javascript 전화번호 자동완성 및 유효성검사

graykang 2022. 10. 28. 15:32
728x90
반응형
SMALL

예전에 스크립트 부분만 간략하게 게시한적이 있는데 좀더 보강한 내용으로 다시 정리 해봤다.

 

#구혀된 기능...

- 자동완성: 번호만 입력해도 자동으로 "-"를 넣어준다.

- 휴효성검사:

  >헨드폰, 일반전화 각각 형식에 맞는지 확인.

  >일반전화인지 확인.(080,070번호는 제외처리)

  >숫자만 입력 가능 숫자이외의 문자가 입력 되면 지워버림.

 

<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
</head>
<body>
    <div>휴대폰
        <input type="text" class="js_tel_in_format" style="width: 200px;" name="userManagerMobile" id="userManagerMobile" maxlength="13">
        <p style="display: none;" id="userMobileText">휴대폰번호가 입력되지 않았거나, 잘못된 형식입니다.</p>
    </div>
    <div>일반전화
        <input type="text" class="js_tel_in_format" style="width: 200px;" name="userManagerMobile" id="userPhone" maxlength="13">
        <p style="display: none;" id="userPhoneText">일반번호가 입력되지 않았거나, 잘못된 형식입니다.</p>
    </div>
    <div>Fax
        <input type="text" class="js_tel_in_format" style="width: 200px;" name="userManagerMobile" id="userFax" maxlength="13">
        <p style="display: none;" id="userFaxText">FAX번호가 입력되지 않았거나, 잘못된 형식입니다.</p>
    </div>

<script>
$(document).ready(function(){
	/*전화번호 수동 입력시 자동완성 기능. js_tel_in_format클래스는 모두 적용됨.*/
	$(document).on("keyup", ".js_tel_in_format", function(idx,data) {
		$(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") ); 
		//휴대폰 휴효성 검사
		if($(this).attr("id") == "userManagerMobile"){
			var reg_mobile = /^01([0|1|6|7|8|9]?)-?([0-9]{4})-?([0-9]{4})$/;
			var userMobil = $('#userManagerMobile').val().trim();
			if(!reg_mobile.test(userMobil)){
	    		$('#userMobileText').show();
	    		mobileChk = 'N';
			}else{
	    		$('#userMobileText').hide();
	    		mobileChk = 'Y';
			}
		}

		//일반전화 유효성 검사(080,070제외)
		if($(this).attr("id") == "userPhone"){
			var reg_mobile = /^(0(2|3[1-3]|4[1-4]|5[1-5]|6[1-4]))-(\d{3,4})-(\d{4})$/;
			var userPhone = $('#userPhone').val().trim();
			if(!reg_mobile.test(userPhone)){
	    		$('#userPhoneText').show();
			}else{
	    		$('#userPhoneText').hide();

			}
		}
		//일반전화 유효성 검사(080,070제외)
		if($(this).attr("id") == "userFax"){
			var reg_mobile = /^(0(2|3[1-3]|4[1-4]|5[1-5]|6[1-4]))-(\d{3,4})-(\d{4})$/;
			var userFax = $('#userFax').val().trim();
			if(!reg_mobile.test(userFax)){
	    		$('#userFaxText').show();
			}else{
	    		$('#userFaxText').hide();

			}
		}
		
	});

});

</script>

</body>
</html>

#결과:

728x90
반응형
LIST
저작자표시

'javascript' 카테고리의 다른 글

jquery+ checkbox selected control by radio button+ 라디오 버튼에 의한 체크박스 컨트롤 하기  (0) 2022.11.04
javascript+jquery+submit+loading 로딩중 표시 하기  (0) 2022.11.01
moden javascript attribute data get set (선택요소의 data값 가져오기, 수정하기 moden javascript방법)  (0) 2022.10.27
jquery 선택요소의 Data 값 가져오기, 수정하기  (0) 2022.10.26
크롬 개발자 도구 차단 2, Detect browser developer tools by javascript 2(chrome, firefox, Edge)  (2) 2022.10.25
'javascript' Related Articles more
Comments