[ IntelliJ ] JavaScript 활용 유효성 검사 ( 전화번호 )

 

 

 

 

사용 클래스 : Controller, Service, DTO, Entity

사용 인터페이스 : Service 구현, Repository

사용 DB : ORACLE

사용 언어 : Java, JavaScript

UI : HTML5, Thymeleaf

 

 

---

 

 

🔴UI

<!-- 전화번호 유효성 검사 -->
<div>
    <label>CELLPHONE: </label>
    <input type="text" id="phone" name="phone" maxlength="13"/>
    <button type="button" id="phone_check_btn">전화번호 확인</button>
    <span id="phone_check_msg"></span>
</div>

이런 모양의 입력창을 이용할 것이다

 

 

---

 

 

🔴Controller

@PostMapping("/check/phone")
@ResponseBody
public String phonecheck(@RequestParam("phone") String phone){
    int count = service.phonecheck(phone);
    if (count == 0) {
        return "match";
    } else {
        return "no";
    }
}

스크립트 중 ajax에서 보내 온 data(phone)을 SQL문을 통해 구분을 할 것이다

전화번호가 중복된 값이 있는지 없는지를 확인하기 위함이다

 

SQL문에서 받아 온 data값을 숫자(count)로 받아와 해당 숫자가 0 이면 match라는 문자열을 반환한다

 

 

---

 

 

🔴Repository

@Repository
public interface MemberRepository extends JpaRepository<MemberEntity, Long> {
    @Query(value = "SELECT COUNT(phone) " +
            "FROM testtable03 " +
            "WHERE phone = :phone", nativeQuery = true)
    int phonecheck(@Param("phone") String phone);

COUNT( ) 함수를 사용해서 받아온 data값의 숫자를 센다

data값과 비교되는 TABLE 컬럼이 같은 타입이기에 콜론( : )을 써서 비교해준다

 

 

---

 

 

🔴Script 전체 코드

<script>
    var isPhoneValid = false;

    function formatPhone(phone) {
        phone = phone.replace(/\D/g, "");
        if(phone.length < 4) return phone;
        if(phone.length < 7) return phone.replace(/(\d{3})(\d{1,3})/, "$1-$2");
        if(phone.length < 11) return phone.replace(/(\d{3})(\d{3,4})(\d{1,4})/, "$1-$2-$3");
        return phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1-$2-$3");
    }

    function validatePhone(phone) {
        phone = phone.replaceAll(/\D/g,"");
        var regex = /^01[0-9]{8,9}$/;
        return regex.test(phone);
    }

    $(document).ready(function () {
        $("#phone").on("keyup", function() {
            var formatted = formatPhone($(this).val());
            $(this).val(formatted);
        });

        $("#phone_check_btn").click(function() {
            var phone = $("#phone").val()

            if(phone === "") {
                alert("전화번호를 입력해주세요.");
                return;
            }

            if(!validatePhone(phone)) {
                $("#phone_check_msg").text("전화번호 형식이 올바르지 않습니다.").css("color", "red");
                isPhoneValid = false;
                return;
            }

            $.ajax({
                type : "post",
                url : "/phone_check",
                data : {"phone": phone},
                success : function (data) {
                    if(data === "match") {
                        $("#phone_check_msg").text("사용 가능한 전화번호입니다.").css("color","green");
                        isPhoneValid = true;
                    } else {
                        $("#phone_check_msg").text("이미 사용중인 전화번호입니다.").css("color","red");
                        isPhoneValid = false;
                        $("#phone").focus().select();
                    }
                },
                error: function () {
                    alert("서버 통신 중 오류가 발생했습니다.");
                }
            });
        });

        $("form").submit(function () {
            if(!isPhoneValid) {
                alert("전화번호 확인 버튼을 눌러 중복 확인을 완료해주세요.");
                $("#phone").focus().select();
                return false;
            }
        });
    });
</script>

✅ 자동 하이픈( - ) 설정

function formatPhone(phone) {
    phone = phone.replace(/\D/g, "");
    if(phone.length < 4) return phone;
    if(phone.length < 7) return phone.replace(/(\d{3})(\d{1,3})/, "$1-$2");
    if(phone.length < 11) return phone.replace(/(\d{3})(\d{3,4})(\d{1,4})/, "$1-$2-$3");
    return phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1-$2-$3");
}

회원가입을 할 때, 010-xxxx-xxxx 이런 형식이 기본이지만

실제 코드로 입력하면 그냥 text라 010xxxxxxxx 이런식의 데이터가 입력된다

그러니 입력을 하면서 하이픈( - )이 생기게 하는 스크립트 코드를 만들어보았다

• Replace( "찾을 패턴" , "바꿀 패턴" ) : 문자열 전체에서 숫자가 아닌 모든 문자( /\D/g )를 찾는다
  • \D : ( \d )는 숫자( 0~9 )를 의미하고, 반대로 ( \D )는 숫자가 아닌 문자를 의미한다
    • \w(알파벳, 숫자, _) vs \W(그 외)
    • \s(공백) vs \S(공백 아님
  • g : 정규식 추가 옵션
    • g (global) : 전체 문자열에서 모든 매칭 항목을 찾음
    • i (ignore case) : 대소문자 구분하지 않음
    • m (multiline) : 여러 줄에서 ( ^, $ ) 를 각 줄 기준으로 처리
• if ( 조건 ) 010xxxxxxxx → 010-xxxx-xxxx  
  • if 1 : 텍스트를 쓸 때 4자리 미만까지 입력했을 때이다. 즉, 010까지 입력을 했을 땐 하이픈( - )이 필요가 없다
  • if 2 : 중간 단락으로 넘어가서 4~6자리까지 입력했을 때, 첫 번째 하이픈이 생긴다 / 010-xxx
  • if 3 : 중간 단락 중 4자리 모두 입력하면 010-xxx-x 로 변하고, 8~11자 째를 입력하면 마지막 하이픈이 생긴다
  • return : 이어붙어있는 첫단락중간단락마지막 → 첫단락-중간단락-마지막 으로 반환한다

✅ 전화번호 형식 검증

function validatePhone(phone) {
    phone = phone.replaceAll(/\D/g,"");
    var regex = /^01[0-9]{8,9}$/;
    return regex.test(phone);
}

010xxxxxxxx(11자리) = true / 그 외 10자리 미만 = false

• / ^01[0-9]{8-9}$ /
  • ^ : 문자열 시작
  • ^01 : 반드시 01로 시작한다
  • [0-9]{8,9} : 01 뒤로 오는 숫자가 8~9자리가 와야 한다 / 옛날 번호도 가능해짐 - 011, 012,016 . . .
  • $ : 문자열 종료
• regex.test( phone ) : 정규식 검사 결과를 true / false로 반환한다

✅ 이벤트 ( keyup, click, form )

$(document).ready(function () {
    $("#phone").on("keyup", function() { . . . });
    $("#phone_check_btn").click(function() { . . . });
    $("form").submit(function () { . . . });
});

코드에서 이 세 개는 같은 열에 위치한다

셋은 각각의 역할이 있다

• $("#phone").on("keyup", . . .) : $(선택자).on("이벤트종류", 콜백함수); / "이벤트 종류"가 발생했을 때, 뒤에 콜백함수 실행
  • keyup : 키에서 손을 뗄 때
  • keydown : 키를 누를 때
  • keypass : 키를 누르고 있을 때
• $("#phone_check_btn").click( . . . ) : 전화번호 확인 버튼을 클릭 시 실행
• $("form").submit( . . . ) : 폼 전송 시 실행

1️⃣ keyup

$("#phone").on("keyup", function() {
    var formatted = formatPhone($(this).val());
    $(this).val(formatted);
});

전화번호 입력창에 숫자를 입력하며 키보드에서 손 뗄 때 발생하는 이벤트이다

• formatPhone 메서드 : 위 ✅자동 하이픈 ( - ) 설정 에서 다룬 것이다
• formatted : 입력중인 값(this) 설정하는 것이다

 

즉, 입력값 중인 값이 실시간으로 하이픈( - ) 생기게 하기 위함이다

 

2️⃣click

$("#phone_check_btn").click(function() {
    var phone = $("#phone").val()

    if(phone === "") {
        alert("전화번호를 입력해주세요.");
        return;
    }

전화번호 확인 버튼을 클릭을 했는데 입력창이 빈 문자열일 때 알림을 띄우는 이벤트이다

• var phone : 전화번호를 입력한 후에 확인 버튼을누르는데 그 때 들어간 value 값
• if( phone === " " ) : 입력된 값이 빈 문자열일 경우 "전화번호를 입력해주세요" 알림창

if(!validatePhone(phone)) {
    $("#phone_check_msg").text("전화번호 형식이 올바르지 않습니다.").css("color", "red");
    isPhoneValid = false;
    return;
}

전화번호 확인 버튼 클릭을 했는데 형식이 올바르지 않을 때 발생하는 이벤트이다

• validatePhone 메서드 : 위 ✅전화번호 형식 검증 에 지정한 올바른 형식을 비교하고, false를 반환한다

$.ajax({
    type : "post",
    url : "/phone_check",
    data : {"phone": phone},
    success : function (data) {
        if(data === "match") {
            $("#phone_check_msg").text("사용 가능한 전화번호입니다.").css("color","green");
            isPhoneValid = true;
        } else {
            $("#phone_check_msg").text("이미 사용중인 전화번호입니다.").css("color","red");
            isPhoneValid = false;
            $("#phone").focus().select();
        }
    },
    error: function () {
        alert("서버 통신 중 오류가 발생했습니다.");
    }
});

전화번호 확인 버튼 클릭을 했을 때 해당 전화번호가 사용가능 / 이미 사용중 을 확인하는 이벤트이다

1. post 타입, Controller("/phone_check"), 입력된 데이터 값을 phone이라는 이름으로 보낸다
2. 비교 후 응답 data를 success로 다시 비교하여 사용가능 / 이미 사용중 메시지를 띄운다
3. 사용가능 = true / 이미 사용중 = false 를 반환한다

3️⃣form

$("form").submit(function () {
    if(!isPhoneValid) {
        alert("전화번호 확인 버튼을 눌러 중복 확인을 완료해주세요.");
        $("#phone").focus().select();
        return false;
    }
});

form 태그에서 전송( submit )되려고 할 때 발생하는 이벤트이다

• !isPhoneValid
  • 입력한 전화번호가 없으면 alert창 띄우고, 입력창에 커서가 옮겨진다
  • 즉, false를 반환하여 true를 반환할 값을 입력하라는 것이다

 

---

 

 

 

 

이제 출력을 해보면

 

 

 

---

 

 

 

 

이렇게 되었습니다

 

 

추후에 익숙해지면 CSS도 해보겠습니다..!