JS | 로그인 활성화 기능 구현 (+ 유효성 로직 추가)

Mission.

• id, password 가 입력되면 로그인 버튼 활성화
• id, password 가 다시 지워지면 로그인 버튼 비활성화

DOM요소

const inputId = document.querySelector('.loginId');
const inputPw = document.querySelector('.loginPw');
const loginBtn = document.querySelector('.loginBtn');

첫번째 방법

inputPw.addEventListener('keydown', () => {
    if(inputId.value && inputPw.value) {
          loginBtn.disabled = false;
        loginBtn.style.backgroundColor = '#4390E7';
    }
});
inputId.addEventListener('keydown', () => {
    if(inputId.value && inputPw.value) {
          loginBtn.disabled = false;
        loginBtn.style.backgroundColor = '#4390E7';
    }
});

inputPw.addEventListener('focusout', () => {
    if(inputId.value == '' || inputPw.value == '') {
          loginBtn.disabled = true;
        loginBtn.style.backgroundColor = '#c4e1fb';
    }
});
inputId.addEventListener('focusout', () => {
    if(inputPw.value == '' || inputId.value == '') {
          loginBtn.disabled = true;
        loginBtn.style.backgroundColor = '#c4e1fb';
    }
});

1. id가 입력되면 id의 value와 pw의 value가 모두 입력 되었는지 확인하고 두 value가 모두 true 값이면 로그인 버튼이 활성화 되도록 한다. (pw도 동일한 코드 반복)
2. id에서 포커스 아웃되면 id와 pw의 value값을 확인하고 둘 중 하나라도 value 값이 비어있다면 로그인 버튼이 비활성화 된다. (pw도 동일한 코드 반복)

아쉬운점

동일한 코드가 반복되고 값을 입력했을 때 2가지 letter 이상 입력되어야만 코드가 정상 작동한다.

두번째 방법

// DOM 요소 추가
const loginTable = document.querySelector('.loginTable');

const checkF = () => {
    if(inputId.value && inputPw.value ? 
        loginBtn.disabled = false : loginBtn.disabled = true){
            loginBtn.style.backgroundColor = "#c4e1fb";
        } else {
            loginBtn.style.backgroundColor = "#4390E7";
        }
    }

loginTable.addEventListener('keyup', checkF);

1. id와 pw의 input을 감싸는 table 요소를 선택한 후 키가 눌릴 때마다 checkF 라는 함수가 실행되도록 한다.
2. checkF은 talbe요소의 키가 눌릴 때마다 id와 pw의 value 값을 비교하도록 하고 삼항연산자를 사용하여 id와 pw 모두 value가 존재한다면 로그인 버튼이 활성화되고, 2가지 모두 value가 존재하지 않다면 버튼이 비활성화 되도록 한다.

유효성 로직

const loginTable = document.querySelector('.loginTable');
const inputId = document.querySelector('.loginId');
const inputPw = document.querySelector('.loginPw');
const loginBtn = document.querySelector('.loginBtn');

const checkF = (e) => {
    if(inputId.value.includes('@') && inputPw.value.length >= 5 ? 
        loginBtn.disabled = false : loginBtn.disabled = true){
            loginBtn.style.backgroundColor = "#c4e1fb";
        } else {
            loginBtn.style.backgroundColor = "#4390E7";
        }
    }

loginTable.addEventListener('keyup', checkF);

id와 pw의 value가 모두 비어있지 않음과 동시에 id 의 value에 @가 포함되어 있고, pw는 5개의 letter 이상이 입력되어야만 로그인 버튼이 활성화 되도록 조건식에 유효성 체크로직을 추가하였다.

아쉬웠던 점

keyup, keypress, keydown의 차이에 대해 제대로 인지하지 못해 초기 에러를 쉽게 찾아내지 못했다.