[개발자의품격][부트캠프][1기][15차시] JavaScript 주요 포인트 #22

[ 영광의 시대!/2022 개발자의 품격 부트캠프 1기 ]

[개발자의품격][부트캠프][1기][15차시] JavaScript 주요 포인트 #22 | 이벤트

2022년 03월 01일 10시 15분 30초에 업로드 된 글입니다.

작성자: DandyNow

728x90

JavaScript 주요 포인트 #22

required 메시지 이벤트

setCustomValidity

input type이 required일 때 form submit에서 커스텀 메시지를 줄 수 있다.

<body>
  <!-- oninvalid, oninput은 form 태그 안에서 사용할 수 있다. -->
  <!-- setCustomValidity로 원하는 메시지를 줄 수 있다. -->
  <form onsubmit="login();">
    Email:
    <input
      type="email"
      name=""
      id=""
      oninvalid="this.setCustomValidity('Enter User Name Here')"
      oninput="this.setCustomValidity('')"
      required
    />
    <br />
    PW: <input type="password" name="" id="" required />
    <br />
    Tel:
    <input type="tel" name="" id="" pattern="^010-\d{3,4}-\d{4}$" required />
    <button type="submit">로그인</button>
  </form>
</body>

alert과 정규식

alert와 정규식을 이용해서 커스텀 메시지를 줄 수 있다. if 문을 사용하므로 setCustomValidity 보다 코드가 복잡해진다.

<body>
  <div>
    Email: <input type="email" name="" id="email" required />
    <br />
    PW: <input type="password" name="" id="pw" required />
    <br />
    <button onclick="login();">로그인</button>
  </div>
  <script>
    function validityMessage(msg) {
      return alert(msg);
    }

    function login() {
      event.preventDefault();
      console.log("login 함수 실행");
    }

    function login() {
      const email = document.querySelector("#email").value;
      const pw = document.querySelector("#pw").value;

      if (email === "") {
        return alert("이메일을 입력하세요.");
      }

      const regexpEmail = /^([a-z]+\d*)+(\.?[a-z]*)+@[a-z]+(\.[a-z]{2,3})+$/;
      if (!regexpEmail.test(email)) {
        return alert("올바른 형식의 Email을 입력하세요.");
      }

      if (pw === "") {
        return alert("비밀번호를 입력하세요.");
      }
    }
  </script>
</body>

checkValidity

checkValidity로 form 태그가 아닌 일반 div 안에서도 필수 입력 메시지를 제어할 수 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .invalid-message {
        display: none;
        margin-top: 5px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <label for="email">이메일</label>
        <input type="email" name="" id="email" required />
        <div class="invalid-message" id="email_invalid_message"></div>
      </div>
      <div>
        <label for="pw">비밀번호</label>
        <input type="password" name="" id="pw" required />
        <div class="invalid-message" id="pw_invalid_message"></div>
      </div>
      <button onclick="login();">로그인</button>
    </div>
    <script>
      function login() {
        const email = document.querySelector("#email");
        const pw = document.querySelector("#pw");

        // checkValidity로 form 태그가 아닌 일반 div 안에서도 필수 입력 메시지를 제어할 수 있다.
        if (!email.checkValidity()) {
          console.log(email.validationMessage);
          // ~ 선택자는 동일 로드 레벨에서 invalid-message 클래스를 찾는다.
          // document.querySelectorAll("#email ~ .invalid-message")[0];
          document.querySelector("#email_invalid_message").innerText =
            email.validationMessage;
          document.querySelector("#email_invalid_message").style.display =
            "block";
          return;
        } else {
          document.querySelector("#email_invalid_message").style.display =
            "none";
        }

        if (!pw.checkValidity()) {
          console.log(pw.validationMessage);
          document.querySelector("#pw_invalid_message").innerText =
            pw.validationMessage;
          document.querySelector("#pw_invalid_message").style.display = "block";
          return;
        } else {
          document.querySelector("#pw_invalid_message").style.display = "none";
        }
      }
    </script>
  </body>
</html>

728x90

저작자표시 비영리 변경금지

'영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글

[개발자의품격][부트캠프][1기][16차시] 부트스트랩 #2 \| 조회, 삭제 (0)	2022.03.02
[개발자의품격][부트캠프][1기][15차시] 부트스트랩 #1 (0)	2022.03.01
[개발자의품격][부트캠프][1기][14차시] JavaScript 주요 포인트 #21 \| 데이터 그리드 - 정렬, 필터, 페이징 (0)	2022.02.28
[개발자의품격][부트캠프][1기][13차시] JavaScript 주요 포인트 #20 \| DOM event - 스크롤 이벤트 (0)	2022.02.23
[개발자의품격][부트캠프][1기][13차시] JavaScript 주요 포인트 #19 \| DOM 패턴 - 모달과 고객정보 수정 (0)	2022.02.23

다음글이 없습니다.

이전글이 없습니다.