정규표현식으로 데이터 판별

자주 쓰이는 정규표현식

[참고링크] https://blogpack.tistory.com/560

---

랜딩페이지 제작 중 고객의 성함과 연락처를 수집하는 input이 존재하는데, 입력되는 값에 따라 알림창을 발생시키는 동작을 구현하고자 하였다.

1. 이름에 입력값이 없을 때와 숫자&알파벳&단일한글자모음&특수문자 포함할 때는 경고창 발생
2. 연락처에 입력값이 8자리 이하일 때와 알파벳&한글&특수문자 포함할 때는 경고창 발생, input 창에서 입력됐던 이름 삭제
3. 연락처에 입력값이 8자리 이하일 때, 알파벳&한글&특수문자 포함할 때는 경고창 발생, input 창에서 입력됐던 연락처 삭제
4. 개인정보이용동의 미체크시 경고창 발생
5. 위에 해당 사항 없을 시 신청완료 알림창 발생

알림창 발생과 별도로 나중에 입력값을 DB에 옮길 때를 대비하기 위해서 다음과 같이 입력값을 처리하였다.
1. 이름은 .split(" ").join("")을 사용하여 공백이 있을 때 제거한다.
2. 연락처는 마찬가지 방식으로 공백과 ) - . ( 가 있을 때 제거한다

<script>
$(function () {
  
  $("#applybtn").on("click", function () {
    let name = $("#name").val();
    let phone = $("#phone").val();
    let pattern1 = /[0-9]/;
    let pattern2 = /[a-zA-Z]/;
    let pattern3 = /[ㄱ-ㅎ|ㅏ-ㅣ]/;
    let pattern4 = /[~!@#\#$%<>^&*,]/;
    let pattern5 = /[가-힣]/;

    name = name.split(" ").join("");
    phone = phone
      .split(")")
      .join("")
      .split("-")
      .join("")
      .split(".")
      .join("")
      .split("(")
      .join("")
      .split(" ")
      .join("");

    if (
      name.length == 0 ||
      pattern1.test(name) ||
      pattern2.test(name) ||
      pattern3.test(name) ||
      pattern4.test(name)
    ) {
      $(".modal-body").html(
        "<p>올바른 이름이 아닙니다😭<br />다시 입력해주세요😉</p>"
      );
      $("#name").val("");
    } else if (
      phone.length < 9 ||
      pattern2.test(phone) ||
      pattern3.test(phone) ||
      pattern4.test(phone) ||
      pattern5.test(phone)
    ) {
      $(".modal-body").html(
        "<p>올바른 연락처가 아닙니다😭<br />다시 입력해주세요😉</p>"
      );
      $("#phone").val("");
    } else if ($("input:checked[id='info']").is(":checked") == false) {
      $(".modal-body").html("<p>개인정보처리방침에<br/>동의해주세요😉</p>");
    } else {
      $(".modal-body").html(
        "<p>호그와트에 대한 관심에<br />감사드립니다😀<br />입력해주신 연락처로<br />안내드릴 예정입니다🙂</p>"
      );
    }
    $("#mymodal").modal("show");
  });

});
</script>