TIL. 유효성 검사

회원 검사가입 과정을 거치다 보면,
사이트에서 원하는 조건에 맞게 반드시 형식을 맞춰 입력해야 하는 경우가 생김.

특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등)
비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다.
비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다.
신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다.

이런 기능을 유효성 검사(Form validation)라고 부름.

JS 실습

1. 필요한 HTML 요소들 불러오기

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

let elSuccessMessage = document.querySelector('.success-message');
let elFailureMessage = document.querySelector('.failure-message');

let elInputPassword = document.querySelector('#password');
let elInputReTypePassword = document.querySelector('#password-retype')
let elMismatchMessage = document.querySelector('.mismatch-message');

let elBtnSignup = document.querySelector('.btn_signup');

2. 아이디는 4글자 이상일때

내가 짠 코드

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

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

더 깔끔하게 addEventListener()

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

function isMoreThan4Length(value) {
  // TODO : 동영상 강의를 보고 이 함수를 완성하세요.
  return value.length >= 4;
}

elInputUsername.addEventListener('keyup',idCheck);

3.비밀번호랑 비밀번호 확인이 일치하는지

const passwordCheck = function(){
  if(isMatch(elInputPassword.value, elInputReTypePassword.value)){
    // 실패메세지 없어짐
    elMismatchMessage.classList.add('hide');
    elBtnSignup.removeAttribute('disabled'); // disabled 삭제
  
}else{
  //실패메지가 출력됨
  elMismatchMessage.classList.remove('hide');
  elBtnSignup.setAttribute('disabled','disabled'); //다시 넣어주기 안넣어주면 비밀번호 지웠을때 문제.
  
}
}

function isMatch (password1, password2) {
  // TODO : 동영상 강의를 보고 이 함수를 완성하세요.
  return password1 === password2;
}

elInputReTypePassword.addEventListener('keyup', passwordCheck);

추가로 공부해야할것

정규식표현 이용해서 유효성검사하기
아아디는 영어 또는 숫자만 가능
비밀번호는 최소 8자 이상, 알파벳과 숫자 및 특수문자(@$!%*#?&)는 하나이상 포함