[SEB_FE_44] JS(10) - 유효성 검사, 이벤트 객체

오늘 배운 주제

• 유효성 검사 과제
• 이벤트 객체 기초

오늘 배운 내용

• Script.js

// ID
let isInputUsername = document.querySelector('#username');
let isSuccessMessage = document.querySelector('.success-message');
let isFailureMessage = document.querySelector('.failure-message');

// PASSWORD
let isInputpassword = document.querySelector('#password');
let isRetypepassword = document.querySelector('#password-retype');
let isNotmatch = document.querySelector('.mismatch-message');

isInputUsername.onkeyup = function() {
  if (isMoreThan4Length(isInputUsername.value)) {
    isSuccessMessage.classList.remove('hide');
    isFailureMessage.classList.add('hide');
  } else {
    isSuccessMessage.classList.add('hide');
    isFailureMessage.classList.remove('hide');
  }
}

isRetypepassword.onkeyup = function() {
  if(isMatch(isInputpassword.value, isRetypepassword.value)) {
    isNotmatch.classList.add('hide');
  } else {
    isNotmatch.classList.remove('hide');
  }
}

function isMoreThan4Length(value) {
  return value.length >= 4
  
}

function isMatch (password1, password2) { // 비밀번호 일치 여부 확인
  if(password1 === password2) {
    return true;
  } else {
    return false;
  }
}

• 유효성 검사 함수 작성
  함수 isMatch 가 파일 script.js 에 작성되어야 합니다. 이 함수는 문자열 두 개를 입력으로 받고, boolean 타입을 리턴

오늘의 과제

16가지 테스트 모두 통과!

저번주 토요일 프로그래머스에서 유효성 검사 문제를 풀어둔게 도움이 많이 되었다. 그 당시 정규식을 이용해 문제를 풀었지만 이번 과제는 정규식 없이 풀 수 있다는 걸 보여줌