[자바 스크립트] 12. 로그인 이벤트

Apr 04, 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>
    <!-- onsubmit 필요할 것임 프로젝트 할 때 -->
    <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");

        // pw의 값과 pwCheck의 값 비교
        function valid() {
            // 동일하면 true를 리턴
            if (pw.value == pwCheck.value) {
                return true;
                // 동일하지 않으면 false를 리턴
            } else {
                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>

See more posts

[자바 스크립트] 12. 로그인 이벤트

More articles

[자바 스크립트] 14. 나타내기

[자바 스크립트] 13. 숨기기

[자바 스크립트] 11. 이벤트 종류

[자바 스크립트] 10. 이벤트 리스너