HTML 유효성 검사

1. [자바스크립트] input 창에서 핸드폰 번호 자동으로 하이픈 입력하기

 

기본적으로 회원가입 폼을 만들때나 고객정보를 받기위해 폼을 만들때

핸드폰 번호를 입력하는란을 만들때가 있습니다.

 

보통은 select 박스로 010,011,017 등을 선택하게 만들고

input 박스 2개를 만들어서 나머지 번호를 받도록 만드는게 일반적이긴 합니다.

 

하지만 CSS를 브라우저별로 맞춰야 하고 간격유지와 반응형으로 제작시

CSS를 넣기가 만만치 않습니다.

 

그래서 input 창에 숫자를 입력하면 자동으로 하이픈이 들어갈수 있도록

스크립트로 처리를 하니 CSS를 따로 만들필요가 없어서 편했습니다.

 

 

HTML 부분

<form name="frm" method="post" action="?">

    <input type="text" name="phone" class="phone" maxlength="13" placeholder="핸드폰번호">

</form>

 

 

JS부분

$('.phone').keydown(function(event) {

    var key = event.charCode || event.keyCode || 0;

    $text = $(this);

    if (key !== 8 && key !== 9) {

        if ($text.val().length === 3) {

            $text.val($text.val() + '-');

        }

        if ($text.val().length === 8) {

            $text.val($text.val() + '-');

        }

    }

 

    return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));          

});

 

 

이렇게 코드를 짜면 input 창에 대한 CSS를 줄일수 있고, 반응형제작도 훨씬 편하네요.

나중에 활용을 하기위해 기록을 합니다.

출처: https://mrb18.tistory.com/entry/input-창에서-핸드폰-번호-자동으로-하이픈-입력하기 [DR design]

 

 

 

2. 전화번호 입력시 자동 대시(하이픈, "-") 삽입하는 자바스크립트

전화번호 입력시 input이 하나일때.. "-"를 자동 입력되는 소스를 찾다보니 긴게 많아서.. regexp를 응용하여 한줄짜리를 만들었습니다.. (실제로는 숫자가 아닌걸 제거 > "-" 추가 > 대시 중복("--")을 제거하는 3단계입니다)

0505번호나, 15xx-xxxx처럼 1로 시작하는 번호, 02서울지역번호 처리가 다 됩니다..(위키를 보고 했으니 국제번호 5자리 등을 빼고는 왠만하면 다 잘 될겁니다..)

onkeyup 이벤트에 넣으면 실시간으로 변경하실 수 있습니다.. input의 class에 phoneNumber를 추가하시고 아래처럼 하시면 됩니다..

 

$(document).on("keyup", ".phoneNumber", function() {

    $(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("--", "-") );

});

출처: https://cublip.tistory.com/326 [HeBhy, since 1983.]