TIL #14

유효성 검사

• 유효성 검사에 필요한 HTML 엘리먼트와 CSS 속성 파악하기
  • HTML input 엘리먼트, CSS variable
• 유효성 검사에서 활용할 수 있는 정규표현식 사용법 기초

(1) querySelector를 활용하여 HTML 엘리먼트 정보를 가져오기

const btnSignup = document.querySelector('#btn-signup');
const inputPassword = document.querySelector('#input-pw input');
const inputPasswordRe = document.querySelector('#input-pw-re input');

(2) onclick 속성이나 addEventListener메소드로 이벤트 핸들러 함수를 엘리먼트에 적용하기(시각적 피드백)

btnSignup.onclick = handleBtnSignupClick;
password.onkeyup = handleInputPwChange;

(3) 유효성 검사 함수 만들기

// 비밀번호와 비밀번호확인이 일치하는가?
function passwordmatches(pw, pwre) {
  return pw === pwre;
}

(4) 이벤트 핸들러 함수에서 유효성 검사 실행

function handleBtnSignupClick() {
  let validPwRe = passwordmatches(inputPassword.value, inputPasswordRe.value);
 // 이벤트 핸들러 함수에서 이벤트 발생 지점의 정보 확인하기
if (validPwRe) {
  alert("회원가입을 환영합니다!")
} else {
  alert("회원가입에 필요한 정보를 정확히 입력해주세요")
  }
}