js/browser - 유효성 검사 실습

---

유효성 검사

ex) 웹사이트 “회원가입” 할때?
 
아이디, 이메일, 비번 필수
암호는 숫자와 특수문자 포함 등등..

→ 이런거 검사하는 기능을 유효성 검사
 
최소 기능 제품(MVP) 만들기 연습

학습 목표

* DOM 기초 실습을 통한 구체적 사용법
querySelector
onclick, onkeyup, addEventListener 메소드
이벤트 핸들러 함수 → 이벤트 발생한 곳의 정보 확인
이벤트 핸들러 함수 → 유효성 검사 실행

* 유효성 검사에 필요한 기술 요소
검사에 필요한 HTML 엘리먼트, CSS 속성
- display: none
- 유효성 검사에 활용할 수 있는 정규 표현식 사용법 기초

* 관심사 분리를 적용하거나 유효성 검사 함수를 따로 분리해서 설계하기

유효성 검사 hands-on 1

엘리먼트를 화면에서 사라지게 하는 방법

몇가지 방법이 있지만 실무적으로는
 

case1) CSS 파일에서 클래스 스타일링

/* hide 클래스에다가 스타일링해서 처음 메시지 숨기기 적용*/
.hide {
    display: none;
}

 

case2) CSS display 속성을 자바스크립트로 조작; 비추천

//_node_.styel.display=’none’; 이런 방식

elFailureMessage.style.display='none';

자바스크립트를 이용한 CSS 클래스 추가/삭제

.classList 메서드 이용
 

ex1) 클래스 삭제
//  elFailureMessage.classList.remove('hide')

// 클래스 추가시에는 classList.add() 사용

유효성 검사 hands-on 2

입력값 가져오기: value 메서드 이용

node.value

 

console.log(elInputUsername.value)

유효성 검증 함수 구현 및 조건문 적용

유효성 검증과 관련된 조건문 등을 모듈처럼 분리해서 작성
 

 // 글자 수가 4개 이상인지 검증; true,false →  조건문만 따로 작성(함수화)

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

 

유효성 검증 함수 구현

 

// 아이디 입력창에 글자를 키보드로 입력할 때? onkeyup(이벤트 속성)
//! 이벤트
elInputUsername.onkeyup = function(){
    if(isMoreThan4Length(elInputUsername.value)){
        //! 사용할 수 있는 아이디입니다 메시지가 출력 -> 성공메시지니깐
         //! hide 를 조절하는 코드를 짜야…

        //! 성공 메시지가 보여야 함; 숨겨진 옵션을 삭제
        elSuccessMessage.classList.remove('hide');

        //! 실패 메시지가 가려져야 함
        elFailureMessage.classList.add('hide');
    }
    else{
        //! 성공 메시지가 숨겨져야 함; 옵션을 추가
        elSuccessMessage.classList.add('hide');

        //! 실패 메시지가 보여야 함
        elFailureMessage.classList.remove('hide');
    }
}

이벤트(Event)란?

DOM에서 이벤트는 마우스를 클릭하거나, 키보드를 누르는 등의 사용자 액션에 의해 발생
 
브라우저 창 크기를 조절하거나, 스크롤하는 것도 DOM 이벤트의 일종
 
이벤트가 발생할 때 실행되는 함수; 이벤트 핸들러
→ 이벤트 속성(ex. onclick)에 이벤트 핸들러를 등록할 때는 함수 그 자체로 등록
 

ex) 어떤 버튼 btn가 존재한다고 가정하고 btn이 눌렀을때 console.log() 출력

function handler() {
  console.log('버튼이 눌렸습니다!');
}

btn.onclick = handler;    // 함수 자체로 등록(o)
// btn.onclick = handler();    // 함수 실행을 등록한 것(x)

 
이벤트와 관련된 속성은 on 접두어가 붙음
→ onclick, onkeyup 등...

 

---

유용한 유효성 검증 함수

// 유용한 유효성 검증 함수

// [유효성 검증 함수]: 영어 또는 숫자만 가능
function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]*$/.test(str);        // 결과값은 boolean: true, false
}
// [유효성 검증 함수]: 최소 8자 이상하면서, 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함
function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}    // 결과값은 boolean: true, false