[Java Script / DOM] 유효성 검사 및 이벤트

*키워드

: 유효성 검사, querySelector, 이벤트 핸들러 (onclik, onkeyup ... 등), 관심사 분리

 

 

유효성 검사(Form validation)란 ?

웹사이트에서 원하는 조건에 맞게 만드시 형식을 맞춰야하는 경우가 있는데, 그 조건들이 올바르게 구현되어 있는지 확인하는 것.

HTML / CSS / DOM을 이용해 실행 가능.

 

예시)

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

 

이벤트 ?

• DOM에서 이벤트는 마우스를 클릭하거나, 키보드를 누르는 등의 사용자 액션에 의해 발생한다.
• 브라우저 창 크기를 조절하거나, 스크롤하는 것도 DOM 이벤트의 일종이다.
• 이벤트와 관련된 속성은 on이라는 접두어가 붙는다. (onclick, onkeyup 등)

 

이벤트 핸들러(함수) ?

이벤트가 발생할 때 실행되는 함수

 

 

이벤트 객체 ?

이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체.

 

---

 

[유효성 검사 - 예제 코드]

• 조건 : 
  • 회원 가입 시, 아이디 입력창의 글자 수는 4글자 이상이어야 한다.
  • 4글자 이상이면 '사용할 수 있는 아이디입니다'라는 메시지가 출력된다.
  • 4글자 미만일 경우, '아이디는 네 글자 이상이어야 합니다'라는 메시지가 출력된다.

let elInputUsername = document.querySelector('#username')
let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')

function isMoreThan4Length(value) { // 4이상이면 true, 4미만이면 false.
  return value.length >= 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')
}
}