본문 바로가기

FE/JavaScript

[JavaScript] 자바스크립트로 비밀번호 유효성 검사

 

 

 

 

 

자바스크립트로 유효성 검사하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function myFocus() {
        let pwd = document.getElementById("pwd");
        console.log(pwd.value);
        if (pwd.value == "") {
          alert("password 는 필수 항목입니다");
          pwd.focus();
        } else {
          document.getElementById("copy").value = pwd.value;
          pwd.value = "";
        }
      }
      const pwdChk = () => {
        let pwd = document.getElementById("pwd");
        let pwdC = document.getElementById("pwdCheck");
        if (pwd.value !== pwdC.value) {
          alert("비밀번호가 일치하지 않습니다.");
          pwd.value = "";
          pwdC.value = "";
          pwd.focus();
        }
      };
    </script>
  </head>
  <body>
    <!-- <form action="ex30.html" method="get">
      <input type="text" id="txt" required /><br />
      <input type="text" id="pwd" /><br />
      <input type="text" id="copy" /><br />
      <input type="submit" value="클릭" onclick="myFocus()" /><br />
    </form> -->

    <input type="text" id="txt" placeholder="id" /><br />
    <input type="password" id="pwd" placeholder="pwd" /><br />
    <input
      type="text"
      id="pwdCheck"
      placeholder="pwdCheck"
      onchange="pwdChk()"
    /><br />
    <input type="text" id="copy" placeholder="copy" /><br />
    <input type="button" value="클릭" onclick="myFocus()" /><br />
  </body>
</html>
pwd 입력 : 111, 코드 실행

 

728x90