[자바스크립트] 12. 이벤트 종류 (유효성 검사)

Apr 02, 2025


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .hidden-box {
        display: none;
      }

      .red-text {
        font-size: 10px;
        color: red;
      }
    </style>
  </head>

  <body>
    <h1>폼 이벤트</h1>
    <hr />
    <form action="/join" onsubmit="return valid()">
      <input type="text" id="password" /><br />
      <input type="text" id="password-check" /><br />
      <div id="pw-same" class="hidden-box red-text">패스워드가 동일합니다</div>
      <div id="pw-not-same" class="hidden-box red-text">
        패스워드가 동일하지 않습니다
      </div>
      <button type="submit">회원가입</button>
    </form>

    <script>
      let pw = document.querySelector("#password");
      let pwCheck = document.querySelector("#password-check");

      function valid() {
        if (pw.value == pwCheck.value) {
          return true;
        } else {
          alert("패스워드가 동일해야 합니다");
          return false;
        }
      }

      pw.addEventListener("keyup", (e) => {
        if (pw.value == pwCheck.value) {
          pw.readOnly = true;
          document.querySelector("#pw-same").classList.remove("hidden-box");
          document.querySelector("#pw-not-same").classList.add("hidden-box");
        } else {
          pw.readOnly = false;
          document.querySelector("#pw-same").classList.add("hidden-box");
          document.querySelector("#pw-not-same").classList.remove("hidden-box");
        }
      });

      pwCheck.addEventListener("keyup", (e) => {
        if (pw.value == pwCheck.value) {
          pw.readOnly = true;
          document.querySelector("#pw-same").classList.remove("hidden-box");
          document.querySelector("#pw-not-same").classList.add("hidden-box");
        } else {
          pw.readOnly = false;
          document.querySelector("#pw-same").classList.add("hidden-box");
          document.querySelector("#pw-not-same").classList.remove("hidden-box");
        }
      });
    </script>
  </body>
</html>

HTML 구조


<form action="/join" onsubmit="return valid()">
  <input type="text" id="password" /><br />
  <input type="text" id="password-check" /><br />

  <!-- 비밀번호 확인 결과 메시지 -->
  <div id="pw-same" class="hidden-box red-text">패스워드가 동일합니다</div>
  <div id="pw-not-same" class="hidden-box red-text">패스워드가 동일하지 않습니다</div>

  <button type="submit">회원가입</button>
</form>

<form> 태그에 onsubmit="return valid()"를 지정하여, 제출할 때 유효성 검사를 진행함.

두 개의 <input> 태그는 비밀번호와 비밀번호 확인 입력란임.

<div> 요소로 비밀번호가 일치하거나 일치하지 않을 때 메시지를 표시함.

CSS 클래스 .hidden-box로 기본적으로 메시지가 숨겨져 있음.

JavaScript 기능


let pw = document.querySelector("#password");
let pwCheck = document.querySelector("#password-check");

function valid() {
  if (pw.value == pwCheck.value) {
    return true;
  } else {
    alert("패스워드가 동일해야 합니다");
    return false;
  }
}

valid() 함수 (폼 제출 시 유효성 검사)

제출 버튼 클릭 시 호출되며, 입력된 두 비밀번호 값이 같은지 확인함.

같다면 true를 반환하여 폼 제출을 허용하고, 다르면 경고창을 띄우고 false를 반환하여 제출을 막음.


pw.addEventListener("keyup", (e) => {
  if (pw.value == pwCheck.value) {
    pw.readOnly = true;
    document.querySelector("#pw-same").classList.remove("hidden-box");
    document.querySelector("#pw-not-same").classList.add("hidden-box");
  } else {
    pw.readOnly = false;
    document.querySelector("#pw-same").classList.add("hidden-box");
    document.querySelector("#pw-not-same").classList.remove("hidden-box");
  }
});


pwCheck.addEventListener("keyup", (e) => {
  if (pw.value == pwCheck.value) {
    pw.readOnly = true;
    document.querySelector("#pw-same").classList.remove("hidden-box");
    document.querySelector("#pw-not-same").classList.add("hidden-box");
  } else {
    pw.readOnly = false;
    document.querySelector("#pw-same").classList.add("hidden-box");
    document.querySelector("#pw-not-same").classList.remove("hidden-box");
  }
});

keyup 이벤트 리스너 (실시간 검증)

pw와 pwCheck 입력란에 각각 keyup 이벤트 리스너를 설정함.

사용자가 키를 입력할 때마다 입력된 두 값이 같은지 검사함.

비밀번호가 같으면:

#pw-same 메시지를 표시하고, #pw-not-same 메시지는 숨김.
pw 입력란은 readOnly 상태로 설정하여 수정할 수 없게 함.

비밀번호가 다르면:

#pw-not-same 메시지를 표시하고, #pw-same 메시지는 숨김.
pw 입력란은 다시 수정 가능하게 (readOnly = false) 변경.