TIL _ 로그인 양식 및 유효성 검사(vanila js)

❓문제

• 아이디에 '@'가 포함되고, 비밀번호에 6자리 이상의 값이 입력되었을 경우 로그인 버튼이 활성화되는 양식 구현

1. 해결 방안

• 사고 과정

🔓 (문제 파악) 로그인 버튼이 조건에 따라 활성화/비활성화되도록 조작할 수 있어야 함
🔑 (해결 방안)

1. button 태그에 disabled 속성을 부여하여 버튼의 default 를 비활성화로 지정
2. ID와 PW의 입력값이 유효할 경우 button 속성을 false 로 지정
   

<button type="button" id="loginBtn" diabled> 로그인 </button>

• button 태그는 disabled 를 속성으로 가질 수 있습니다.
• disabled 속성을 부여했을 경우, button 태그는 비활성화 되어 사용자가 클릭할 수 없는 상태가 됩니다.
• disabled 속성은 boolean 의 속성을 가지며, disabled 속성을 false 로 지정할 경우 버튼은 다시 활성화됩니다.

🔓 (문제 파악) 그렇다면 ID와 PW 입력값의 유효성은 어떻게 확인할까?
🔑 (해결 방안)

1. form 양식에 데이터가 입력되는 이벤트가 발생했을 때 → EventTarget.addEventListener('input', ) 를 사용
2. ID 입력값에 '@'가 포함되어 있는지 검사 → string.indexOf()를 사용
3. PW 입력값이 6자리 이상인지 검사 → string.length를 사용

const loginForm = document.getElementById('loginForm')
const username = document.getElementById('username');
const password = document.getElementById('password');

loginForm.addEventListener('input', () => {
  if(username.value.indexOf('@') !== -1 && password.value.length >= 6) {
    (ID와 PW의 입력값이 유효할 때 실행 될 코드)
  } else {
    (ID와 PW의 입력값이 유효하지 않을 때 실행 될 코드)
  }
})

🔓 (문제 파악) 최종적으로 ID와 PW 입력값의 유효성에 따라 로그인 버튼 활성화/비활성화 시켜보자
🔑 (해결 방안)

1. 입력값이 유효할 경우(조건문이 true일 경우) → disabled 속성은 false
2. 입력값이 유효할 경우(조건문이 false일 경우) → disabled 속성은 true

const loginForm = document.getElementById('loginForm');
const username = document.getElementById('username');
const password = document.getElementById('password');
const loginBtn = document.getElementById('loginBtn');

loginForm.addEventListener('input', () => {
    if(username.value.indexOf('@') !== -1 && password.value.length >= 6) {
    loginBtn.disabled = false;
  } else {
    loginBtn.disabled = true;
  }
})

2. 결과