유효성 검사

유효성 검사 과제는 페어분과 함께 진행하였다.

이번 과제는 앞서 배운 DOM을 활용하여 자바스크립트에 배운 것들을 적용해 보았다.

script.js

먼저 사용될 클래스를 querySelector를 이용해 변수에 할당하여 주었다.

const elInputUsername = document.querySelector('#username');

const elFailureMessage = document.querySelector('.failure-message');

const elSuccessMessage = document.querySelector('.success-message')

const elInputPasswordRetype = document.querySelector('#password-retype')

const elInputPassword = document.querySelector('#password')

const elMismatchMessage = document.querySelector('.mismatch-message')

그 다음에 유저 이름이 4글자 이상이면 '아이디는 네 글자 이상이어야 합니다'를 숨겨 주었고, 사용할 수 있는 아이디입니다로 표시 되도록 하였다. 4글자 미만은 반대로 하면 된다.

elInputUsername.onkeyup = function (){
  if(isMoreThan4Length(elInputUsername.value)){
    elSuccessMessage.classList.remove('hide')
    elFailureMessage.classList.add('hide')
  } else {
    elFailureMessage.classList.remove('hide')
    elSuccessMessage.classList.add('hide')
  }

}

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

그리고 이번에는 password1, password2가 맞으면 true를 리턴하는 함수를 만들어 준 다음 삼항 연산식을 사용해
서로 다르면 '비밀번호가 일치하지 않습니다'가 나오도록 만들어 주었다.

elInputPasswordRetype.addEventListener('keyup',  () => {
  
  return isMatch(elInputPassword.value , elInputPasswordRetype.value) ? elMismatchMessage.classList.add('hide') : elMismatchMessage.classList.remove('hide')

})

function isMatch (password1, password2) {
  return password1 === password2;

}