반응형

  

l 전화번호 및 휴대전화 유효성 체크 !

 

 회원가입 및 각종 전화번호 입력을 받을 시에 그 번호에 대한 유효성 검사가 필요하다. 불필요한 문자나 특수문자가 들어오는지 아니면 형식에 어긋나서 전화번호에 오류가 있는지 등을 검사하는 방법이다.

 

 

 보통 전화번호는 한 입력창에 받지 않고 3개의 입력창으로 나뉘어서 받는다. 맨 앞 번호에는 형식이 정해져있기 때문에 보통 select box를 사용하여 번호를 부여한다. 그 외에 maxlength 값을 지정하여 최대값을 정하여 입력을 받으면 된다.

 

 

  유효성 검사

 

 

 3개의 입력창에서 값을 받으면 하나의 번호로 조합을 해준다. 이 때 하이푼('-')은 조건에서 제외시키고 유효성 검사를 하며, 그 이후 로직에서 필요하면 하이푼을 사용해서 저장하거나 사용하면 된다.

 

 

 우선 하나로 조합한 전화번호가 공백인지 아니면 자리수가 맞지 않는지에 대해 유효성 검사를 한다. 필자에 같은 경우에는 무조건 11자리의 휴대폰번호만 받고 있어서 길이에 따라 11자리를 체크하고 있다. 필요에 따라 자리수를 지정하여 유효성 검사를 실시하면 된다.

 

 

 그 다음은 전화번호에 숫자가 아닌 영문, 한글, 특수문자가 들어올 경우를 체크한다. isNaN을 이용하여 간단하게 유효성을 확인할 수 있으며, 무조건 숫자로만 받을 수 있다.

 

 

 마지막으로는 그 외에 공백으로 값이 들어올 경우를 대비하여 각 자리를 잘라 유효성 검사를 하였다. 공백을 경우 체크하여 반환해준다.

 

 이 외에도 다양한 전화번호 유효성 검사가 존재하며, 필요에 따라 더 추가하여 사용하거나 보통은 공통 JS파일을 생성하여 사용함으로 유두리있게 사용하면 될 것 같다.

 

 

  참고 소스

 

// 전화번호

$("#telno").val($("#telno1").val() + $("#telno2").val() + $("#telno3").val());

if ($("#telno").val() == "" || $("#telno").val().length != 11 || isNaN($("#telno").val())) {

     alert("휴대폰번호를 정확히 입력해 주세요");

     return;

}

if (isNaN($("#telno").val())) {

     alert("휴대폰번호를 숫자로만 입력해 주세요");

     return;

}

for (var i=0; i<$("#telno").val().length; i++)  {

     var chk = $("#telno").val().substring(i,i+1);

     if(chk == " "){

          alert("휴대폰번호를 정확히 입력해주세요");

          return;

     }

}



↓ 공감 을 눌러주시면 블로거에게 큰 힘이 됩니다 !

반응형

블로그 이미지

SkyBaby

부부가 운영하는 정보 공유 공간입니다. 다양한 일상, 요리, 맛집탐방, 게임, 공부 등의 정보를 담고 있습니다.