영화 예매 사이트 (MoVieCinema) - 회원 가입 유효성 검사

유효성 검사를 하기 위해 정규표현식을 사용한다.
유효성 검사는 사용자가 입력한 데이터가 특정 형식에 맞는지 검사하는 과정을 말한다. 
정규표현식은 문자열을 처리할 때 특정 패턴을 정의하여 검색, 대체, 유효성 검사 등을 수행하는 강력한 도구이다. 이를 통해 데이터가 올바른 형식인지 검사할 수 있으며, 이는 프로그래밍에서 매우 유용하게 사용된다.

1. 아이디 유효성 검사 

<form action="register" method="post" id="enrollForm">
    <table>
        <tr>
          <th><label for="username">ID</label></th>
          <td>
              <div">
                  <input type="text" name="username" class="form-control" id="username"
                         placeholder="영문과 숫자를 조합해 6~10글자" maxlength="10">
                  <div id="checkIdResult" style="font-size: 0.8em; display: none;"></div>
              </div>
          </td>
        </tr>

$(() => {
    const $idInput = $("#username");
    const getIdCheck = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{5,10}$/; //keyup이벤트를 걸어서 5로 해줘야 6글자 인식함
    const $checkIdResult = $("#checkIdResult");
    const $enrollFormSubmit = $("#enrollForm :submit");

    $idInput.focus();


    $idInput.on('blur keyup', function() {
        const id = $idInput.val();
        let isValidId = false;

        if (event.type === 'blur' && !id) {
            $checkIdResult.show().css("color", "red").text('아이디를 입력해주세요.');
            $enrollFormSubmit.attr("disabled", true);
            return;
        } else if (!getIdCheck.test(id)) {
            $checkIdResult.show().css("color", "red").text('아이디는 영문과 숫자를 포함해 6~10자 입니다.');
            $enrollFormSubmit.attr("disabled", true);
            return;
        } else {
         isValidId = true;
        }

        console.log("isValidId  " +  isValidId);

        // 유효성 검사를 통과한 경우에만 AJAX 요청 실행
        if(isValidId) {
            $.ajax({
                url: "idCheck",
                data: {id: id},
                success: function (result) {
                    if (result === "true") {
                        $checkIdResult.show().css("color", "red").text("이미 사용중 ID입니다.");
                        $enrollFormSubmit.attr("disabled", true);
                    } else if (result === "false") {
                        $checkIdResult.show().css("color", "green").text("사용가능한 ID입니다.");
                        $enrollFormSubmit.attr("disabled", false);
                    } else {
                        $checkIdResult.show().css("color", "red").text("ID 중복 체크 중 오류가 발생했습니다.");
                        $enrollFormSubmit.attr("disabled", true);
                    }
                },
                error: function () {
                    console.log("아이디 중복체크용 ajax통신 실패");
                }
            });
        }
    })
});

2. 비밀번호 유효성 검사

<tr>
  <th><label for="password">PW</label></th>
  <td>
      <div>
          <input type="password" name="password" id="password" placeholder="영문, 숫자, 영문자 포함 8~12글자"  maxlength="12">
           <div id="checkPwResult" style="font-size: 0.8em; display: none;"></div>
      </div>
  </td>
</tr>

$(() => {
      const $pwInput = $("#password");
      var getPwCheck = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@#$!%])[A-Za-z\d@#$!%]{8,12}$/;
      const $checkPwResult = $("#checkPwResult");
      const $enrollFormSubmit = $("#enrollForm :submit");

      $pwInput.on('input', function() {
          const pw = $pwInput.val();

          if(!pw) {
              $checkPwResult.show().css("color", "red").text('비밀번호를 입력해주세요.');
              $enrollFormSubmit.attr("disabled", true);
              return;
          } else if (!getPwCheck.test(pw)) {
               $checkPwResult.show().css("color", "red").text('비밀번호는 영문과 숫자, 특수기호를 포함해 8~12자 입니다.');
               $enrollFormSubmit.attr("disabled", true);
               return;
          } else {
              $checkPwResult.show().css("color", "green").text('사용가능한 비밀번호입니다.');
              $enrollFormSubmit.attr("disabled", false);
          }
      })
 });

3. 이름 유효성 검사 : 입력 여부

<tr>
  <th><label for="name">NAME</label></th>
  <td>
      <div>
          <input type="text" name="name" id="name" placeholder="이름 입력" required>
          <div id="checkNameResult" style="font-size: 0.8em; display: none;"></div>
      </div>
  </td>
</tr>

$(() => {
    const $nameInput = $("#name");
    var getNameCheck = /^[a-zA-Z가-힣]+$/;
    const $checkNameResult = $("#checkNameResult");
    const $enrollFormSubmit = $("#enrollForm :submit");

    $nameInput.on('input', function() {
        const name = $nameInput.val();

        if(!name){
             $checkNameResult.show().css("color", "red").text('이름을 입력해주세요.');
             $enrollFormSubmit.attr("disabled", true);
        } else {
            $checkNameResult.hide();
        }
    })
});

4. 전화번호 유효성 검사 : 숫자만, 11자리 입력

<tr>
    <th><label for="phoneNumber">PHONE</label></th>
    <td>
        <div class="mb-3">
            <input name="phoneNumber" id="phoneNumber" placeholder="- 빼고 입력해주세요"  maxlength="11" required>
            <div id="checkPhoneResult" style="font-size: 0.8em; display: none;"></div>
        </div>
    </td>
</tr>

$(() => {
    const $phoneInput = $("#phoneNumber");
    var getPhoneCheck = /^[0-9]{11}$/;
    const $checkPhoneResult = $("#checkPhoneResult");
    const $enrollFormSubmit = $("#enrollForm :submit");

    $phoneInput.on('input', function() {
        const phone = $phoneInput.val();

        if(!phone) {
        $checkPhoneResult.show().css("color", "red").text('휴대폰 번호를 입력해주세요.');
        $enrollFormSubmit.attr("disabled", true);
         return;
        } else if (!getPhoneCheck.test(phone)) {
             $checkPhoneResult.show().css("color", "red").text('전화번호에는 숫자만 넣어주세요. 전화번호는 11자리 입니다.');
             $enrollFormSubmit.attr("disabled", true);
             return;
        } else {
            $checkPhoneResult.show().css("color", "green").text('유효한 전화번호입니다.');
            $enrollFormSubmit.attr("disabled", false);
        }
    })
});

모든 필드를 입력해야만 회원가입 처리가 가능하도록 한다.

$("#enrollForm").submit(function(event) {
    const username = $("#username").val().trim();
    const name = $("#name").val().trim();
    const password = $("#password").val().trim();
    const emailId = $("#emailId").val().trim();
    const emailAddress = $("#emailAddress").val().trim();
    const phoneNumber = $("#phoneNumber").val().trim();
    const kakaoAddress = $("#kakaoAddress").val().trim();

    if (!username || !name || !password || !emailId || !emailAddress || !phoneNumber || !kakaoAddress) {
        alert("필수 입력 값을 모두 입력해주세요.");
        event.preventDefault(); // 폼 제출 방지
        return false;
    }
});