[정규식]자바스크립트(숫자, 휴대폰, 전화번호, 주민등록번호,이메일)

텍스트 박스를 사용하다 보면 정규식을 활용할 일이 정말 많은데요

오늘은 그중에서도 (제일많이 or 자주쓰는) 대표 정규식에 대해 소개해드릴까 합니다.

 

1. 숫자만 입력

 

입력 받을 때의 값을 알아야 하기 때문에 keyup 이벤트를 사용합니다.

• keyup : 키보드가 눌려있다가 떼는 순간 발생

• keydown : 키보드가 눌려있을때 발생

• keypress : 키보드가 눌리는 순간 발생

$("#" + id).bind("keyup", function(event) {
    var regNumber = /^[0-9]*$/;
    var temp = $("#" + id).val();
    if(!regNumber.test(temp))
    {
        console.log('숫자만 입력하세요');
        $("#"+id).val(temp.replace(/[^0-9]/g,""));
    }
});

2번째 라인은 숫자만 있는지 체크하는 정규식입니다

var regNumber = /^[0-9]*$/;

7번 라인은 0에서 9 숫자가 아니면 빈 값으로 변경해 텍스트 박스에 값을 넣게 됩니다.

이렇게 되면 사용자는 입력할때 한글이나 영어, 특수기호를 써도 바로 공백으로 변환시켜 버리기 때문에 

숫자밖에 입력을 못하게 됩니다.

 

2. 세자리 수마다 , 찍기

 

세자리 수마다 , 찍는 것처럼 표현을 하려면 1번 예제 7번 라인에서 아래 부분만 수정하면 됩니다.

$("#"+id).val(temp.replace(/\B(?=(\d{3})+(?!\d))/g, ","));

 

3. 휴대폰 / 전화번호

 

/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/g

값을 입력받을 때마다 '-'(하이픈)을 자동으로 넣고 싶으면 

( /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/, "$1-$2-$3" );

 

4. 주민등록번호

 

^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/g

5. 이메일

 

/^[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[@]{1}[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[.]{1}[A-Za-z]{1,5}$/g

※ 정규식 사용하기 좋은 유용한 사이트

표현식을 쉽게 이해할 수 있도록 도식화 하는 유틸리티입니다. 

구현한 정규식이 도식으로 목적에 맞게 구현 되고 있는지 테스트 할 수 있습니다.