Spring Boot 프로젝트 9일차[20241012]

Spring Boot 프로젝트 9차. 저번에 html과 css만 사용한 퍼블리싱을 완성하였습니다. 이제 js를 추가하여 api나 부가적인 기능들을 추가하여 퍼블리싱 작업을 마무리하려고 합니다. 아래는 js를 추가한 페이지 및 코드들입니다.

 

📌완료된 퍼블리싱 페이지 (1)

-값을 입력하였는지 유효성 검사하는 코드

        <!-- 이름 -->
          <div class="adoptrequest-content-box">
            <div class="adoptrequest-content-title">성명</div><input class="adoptrequest-input-small" id="nameInput"
              type="text" onblur="checkNameInput()">
          </div>
          <!-- 이름 미입력 에러메세지 -->
          <div class="Error">
            <div class="adoptrequest-content-title" id="nameError2" style="display: none;"></div>
            <div id="nameError" style="color: red; display: none;">성명을 정확히 입력해주세요</div>
          </div>

먼저 이름을 입력하는 input창 아래에 경고문 div를 삽입한 후 display:none으로 숨김처리를 합니다.
이후 js에서 입력창이 빈값인지 확인한 후 빈값일시 에러메세지를 block처리하여 다시 나타나게하고 빈값이 아닐시 다시 숨김처리를 하는 코드를 사용합니다.

function checkNameInput() {
  const inputField = document.getElementById('nameInput');
  const nameError = document.getElementById('nameError');
  const nameError2 = document.getElementById('nameError2');

  if (inputField.value.trim() === '') {
    nameError.style.display = 'block'; // 메시지 표시
    nameError2.style.display = 'block'; // 메시지 표시
  } else {
    nameError.style.display = 'none'; // 메시지 숨김
    nameError2.style.display = 'none'; // 메시지 표시
  }
}

 

 

📌완료된 퍼블리싱 페이지 (2)

-전화번호를 01000000000형식으로 -없이 입력받기

원하는 형식의 값을 받기위해서는 정규표현식을 사용해야합니다. 정규표현식은 전화번호 뿐 아니라 비밀번호, 이메일 등에서도 사용할 수 있습니다. 정규표현식을 사용하기 위해서는 js를 사용해야하며 정해진 형식과 입력값이 일치한지 확인해야합니다.

 

-정규표현식 코드

function checkPhoneInput() {
  const inputField = document.getElementById('phoneInput');
  const phoneError = document.getElementById('phoneError');
  const phoneError2 = document.getElementById('phoneError2');
  const phone_format = /^(01[016789]{1})?[0-9]{3,4}?[0-9]{4}$/;

  if (inputField.value.trim() === '' || !phone_format.test(inputField.value)) {
    phoneError.style.display = 'block'; // 메시지 표시
    phoneError2.style.display = 'block'; // 메시지 표시
  } else {
    phoneError.style.display = 'none'; // 메시지 숨김
    phoneError2.style.display = 'none'; // 메시지 표시
  }
}

 

에러메세지는 위와 동일하게 빈값을 체크하는 부분이며 정규표현식을 사용한 부분 아래입니다.

  const phone_format = /^(01[016789]{1})?[0-9]{3,4}?[0-9]{4}$/;

정규표현식을 해석하면 

/ : 정규표현식의 시작과 끝

^, $ : 문자열의 시작과 끝

01[016789]{1} : 01로 시작하고 뒤에 0, 1, 6, 7, 8, 9 중 아무 숫자 하나{1}

[0-9]{3,4} : 0에서 9까지의 숫자 중 아무거나 3~4개의 숫자

-을 넣은 형식으로 입력받고 싶다면 ?앞에 -을 넣어주면 됩니다.

 const phone_format = /^(01[016789]{1})-?[0-9]{3,4}-?[0-9]{4}$/;

 

이후에 아래 코드를 입력하여 inputField(입력한값)의 값(value)가 포맷과 일치한지 확인해주면 완료입니다.

!phone_format.test(inputField.value)

📌완료된 퍼블리싱 페이지 (3)

-이메일형식으로 입력받기

위 전화번호 정규표현식과 format만 다르고 동일하게 작성하면 됩니다.

function checkEmailInput() {
  const inputField = document.getElementById('emailInput');
  const emailError = document.getElementById('emailError');
  const emailError2 = document.getElementById('emailError2');
  const email_format = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

  if (inputField.value.trim() === '' || !email_format.test(inputField.value)) {
    emailError.style.display = 'block'; // 메시지 표시
    emailError2.style.display = 'block'; // 메시지 표시
  } else {
    emailError.style.display = 'none'; // 메시지 숨김
    emailError2.style.display = 'none'; // 메시지 표시
  }
}