[Section 1] 유효성 검사

조건

변수선언

const elInputUsername = document.querySelector('#username') //아이디 입력
const elFailureMessage = document.querySelector('.failure-message') //실패메세지
const elSuccessMessage = document.querySelector('.success-message') // 성공매세지
const elInputPassword = document.querySelector('#password') //비밀번호
const elInputPasswordRetype = document.querySelector('#password-retype') //비밀번호 확인
const elMismatchMessage = document.querySelector('.mismatch-message') //비밀번호 불일치 메세지

querySelector를 통해 document에서 요소를 참조한다.

---

아이디 조건

function isMoreThan4Length(value) { //4글자 이상인 글자를 탐색하는 함수
  return value.length >= 4
}

elInputUsername.onkeyup = function () {
  if (isMoreThan4Length(elInputUsername.value)) {
    // console.log('단어수 충족')
    elSuccessMessage.classList.remove('hide')
    elFailureMessage.classList.add('hide')
  }
  else {
    // console.log('단어수 짧음')
    elSuccessMessage.classList.add('hide')
    elFailureMessage.classList.remove('hide')
  }
}

onkeyup을 통해 elInputUsername이 눌렸을때 classList에서 클래스가 hide인것을 remove시켜준다.
.hide는 display:none;
단어 수가 4보다 작으면 반대로 적용해준다.

---

아이디 조건

function isMatch(password1, password2) {
  return password1 === password2
} //password1와 password2가 일치하는지

elInputPasswordRetype.addEventListener('keyup', () => {
  if (isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
    // console.log('비밀번호 일치')
    elMismatchMessage.classList.add('hide')
  }
  else {
    // console.log('비밀번호 불일치')
    elMismatchMessage.classList.remove('hide')
  }
})

동일한 방식으로 패스워드가 일치하는지 함수를 만들어준다.!