[Javascript] 실시간으로 두 개의 input 요소의 값 비교해서 이벤트 발생시키기

실시간으로 두 개의 input 요소의 값 비교해서 이벤트 발생시키기

예를 들면 입력한 두 개의 비밀번호 값이 일치하는지 검사해야 하는 경우는 정말 자주 있습니다.
그럴 때 값을 비교해서 이벤트를 발생시키는 방법을 기록합니다.

 

 

Template

• 두 개의 input 요소를 추가해 줍니다.

<div>
    <label for="password1">New password</label>
    <input type="password" class="newPassword" id=password1>
</div>
<div class="mb-3">
    <label for="password2">Enter again</label>
    <input type="password" class="newPassword" id=password2>
</div>

 

Script

document.addEventListener("DOMContentLoaded", function() {
    const newPassword = document.querySelectorAll(".newPassword");

    let password1 = "";
    let password2 = "";

    newPassword.forEach((input, index) => {
        input.addEventListener("input", function() {
            if (index === 0) {
                password1 = input.value;
            } else if (index === 1) {
                password2 = input.value;
            }

            if ((password1 === password2) && password1.length > 0) {
                newPassword.forEach(input => {
                    console.log('true');
                });
            } else {
                newPassword.forEach(input => {
                    console.log('false');
                });
            }
        });
    });
});

2023.08.15 - [Web/Spring] - [Spring] Fetch API로 사용자 정보 일치 여부 확인하기 (feat. 403 Error)

[Spring] Fetch API로 사용자 정보 일치 여부 확인하기 (feat. 403 Error)

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂