[jQuery] 전화번호 형식 유효성 검사하기: 정규 표현식 활용 방법

 

 

 

 

사용자로부터 전화번호를 입력받았을 때, 그 번호가 올바른 번호인지 체크한 후 저장할 필요가 있습니다.

오늘은 정규식을 활용하여 사용자로부터 입력받은 휴대폰 번호가 올바른 형식으로 입력된 것인지 판단하고,

올바른 형식의 번호가 아니라면 경고창을 띄우고,

올바른 형식의 번호라면 하이픈('-')을 입력하지 않은 번호는 하이픈을 입력한 형식으로 변환시켜 주는 작업까지 해보겠습니다.

 

 

728x90

 

 

---

 

 

 

전화번호 입력 박스와 jQuery문 작성

 

 

 

코드가 간단하기 때문에 한 번에 적어보도록 하겠습니다.

 

 

<span style="margin-right:5px;">전화번호 입력 : </span>
<input type="text" name="pcs" id="pcs"/>

 

 

전화번호를 입력받을 input 태그의 text를 만들어 줍니다.

id는 pcs로 지정해 주겠습니다.

 

 

<script>
    $(document).ready(function() {
        $("#pcs").blur(function() {
            // 입력된 전화번호 가져오기
            var phoneNumber = $("#pcs").val();
            if(phoneNumber) {
                // 정규식을 사용하여 형식 검사
                var regex = /^(01[0-9]{1}-?[0-9]{4}-?[0-9]{4}|01[0-9]{8})$/;

                if (regex.test(phoneNumber)) {
                    // 올바른 형식일 경우
                } else {
                    // 잘못된 형식일 경우
                    alert("잘못된 형식의 전화번호 입니다.");
                    $("#pcs").val("");
                }
            }
        });
    });
</script>

 

 

다음 jQuery문을 작성합니다.

id가 pcs인 태그의 포커스가 해제되었을 때 (blur) pcs에 입력된 value값을 가져옵니다.

 

해당 값을 정규식을 사용하여 올바른 형식인지 검사해 줍니다.

if문을 통해 올바른 형식일 경우 넘어가고,

잘못된 형식일 경우 alert를 통해 경고문을 띄워주며,

pcs에 입력된 값은 초기화시켜주어 다시 입력받도록 해줍니다.

 

 

잘못된 전화번호 형식을 입력했을 때

 

 

잘못된 형식의 전화번호를 입력했을 경우 위와 같이 경고창이 뜨게 됩니다.

 

 

 

입력받은 전화번호에 하이픈 추가하기

 

 

위의 과정을 통해 올바른 전화번호를 입력받았지만 어떤 사용자는 하이픈을 포함하여 입력하고,

어떤 사용자는 하이픈을 넣지 않고 입력하게 되면 입력받은 값이 통일되지 않아,

나중에 보기에도 그렇고 해당 값을 사용하기도 불편합니다.

 

입력받은 휴대폰 번호의 형식을 통일시켜 주기 위해 하이픈을 입력하지 않은 값일 경우,

자동으로 하이픈을 추가해 주는 방법을 알아봅시다.

 

<input id="add_h" type="button" value="하이픈 추가" />

 

 

좀 더 직관적으로 코드를 이해하기 쉽게 하기 위해 버튼을 추가하고 버튼을 누르면 변형되도록 해보겠습니다.

id가 "add_h"인 버튼 하나를 만들어 줍니다.

 

 

$("#add_h").click(function() {
    var pcs = $("#pcs").val();

    // 입력된 문자열에서 하이픈('-')을 제거하여 숫자만 추출
    var pcs = pcs.replace(/[^0-9]/g, '');

    // 전화번호 형식 (010-1234-5678)으로 변환
    if (pcs.length === 10) {
        pcs = pcs.substring(0, 3) + '-' + pcs.substring(3, 7) + '-' + pcs.substring(7, 11);
    } else if (pcs.length === 11) {
        pcs = pcs.substring(0, 3) + '-' + pcs.substring(3, 7) + '-' + pcs.substring(7, 11);
    }

    $("#pcs").val(pcs);
});

 

 

해당 버튼을 눌렀을 때 pcs에 입력된 값을 가져오고,

정규식을 활용하여 입력된 값에 하이픈이 있다면 하이픈을 제거해 줍니다.

 

입력받은 휴대폰 번호의 길이에 따라 입력받은 값을 잘라주고,

자른 번호의 사이사이에 하이픈을 추가해 주어 pcs의 값을 바꾸어줍니다.

 

 

하이픈 추가 버튼 누르기 전

 

 

하이픈 추가 버튼 누르고 난 후

 

 

 

코드가 정상적으로 동작한다면 버튼을 누르면 위와 같이 휴대폰 형식으로 하이픈이 들어가는 것을 확인할 수 있습니다.

 

 

 

사용하기 쉽게 코드 변형

 

 

위의 코드를 사용자가 사용한다면 번거롭게 하이픈 추가 버튼을 계속 눌러줘야 돼서 귀찮을 수밖에 없습니다.

전화번호를 입력받고 바로 정규식으로 검토 후, 하이픈을 추가해 주면 좋지 않을까요?

 

방법은 간단합니다.

 

<script>
    $(document).ready(function() {
        $("#pcs").blur(function() {
            // 입력된 전화번호 가져오기
            var phoneNumber = $("#pcs").val();
            if(phoneNumber) {
                // 정규식을 사용하여 형식 검사
                var regex = /^(01[0-9]{1}-?[0-9]{4}-?[0-9]{4}|01[0-9]{8})$/;

                if (regex.test(phoneNumber)) {
                    // 올바른 형식일 경우
                } else {
                    // 잘못된 형식일 경우
                    alert("잘못된 형식의 전화번호 입니다.");
                    $("#pcs").val("");
                    return false;
                }

                var pcs = phoneNumber;

                // 입력된 문자열에서 하이픈('-')을 제거하여 숫자만 추출
                var pcs = pcs.replace(/[^0-9]/g, '');

                // 전화번호 형식 (010-1234-5678)으로 변환
                if (pcs.length === 10) {
                    pcs = pcs.substring(0, 3) + '-' + pcs.substring(3, 7) + '-' + pcs.substring(7, 11);
                } else if (pcs.length === 11) {
                    pcs = pcs.substring(0, 3) + '-' + pcs.substring(3, 7) + '-' + pcs.substring(7, 11);
                }

                $("#pcs").val(pcs);
            }
        });
    });
</script>

 

 

 

위에서 작성한 코드를 합쳐서 사용하면 됩니다.

이렇게 합쳐서 올바른 전화번호 형태일 경우 아래쪽에서 하이픈을 추가해서 pcs에 입력해 주고,

올바르지 않은 형식일 경우, return false를 통해 아래쪽 코드가 진행되지 않도록 해줍니다.

 

 

하이픈 자동추가

 

 

 

아무런 문제가 없이 코드가 잘 동작한다면, 위와 같은 결과를 얻을 수 있습니다.

 

 

---

 

글을 마치며

 

이번 포스팅에서는 정규식을 활용하여 전화번호의 형식을 변경해 주는 것을 알아보았습니다.

이전에도 정규식에 대해서 몇 번 다룬 적이 있는데, 정규식은 알아두면 유용하게 사용하게 되는 것 같습니다.

 

이번 포스팅을 통해 정규식에 대해서 더 많이 알아가는 시간이 되셨길 바랍니다.