validation check(유효성 검사) 2

3. 이벤트 연결

전체적인 javascript 파일에 대한 flow를 생각해 보면

1) 엘리먼트 변수를 선언한다.

2) 이벤트 핸들러를 생성한다.

• id 체크 핸들러 함수 생성
• password 체크 핸들러 함수 생성
• password re 체크 핸들러 함수 생성
• email 핸들러 함수 생성
• 회원가입 버튼 핸들러 함수를 생성

3) 유효성 검증 함수를 생성한다.

4) 시각적 피드백 함수를 생성한다.

5) 엘리먼트와 이벤트 핸들러를 연결한다.

 

이벤트 핸들러를 생각해 보자. 

지금까지 많이 해보았던 것이 버튼을 클릭했을 때 이벤트가 발생하는 것이었다. 

마우스의 이벤트는 다음과 같은 것이 있다. 

<mouse>

• Click - 사용자가 마우스를 클릭했을 때 발생
• DblClick - 사용자가 마우스를 더블 클릭했을 때 발생
• MouseDown - 사용자가 마우스 버튼을 눌렀을 때 발생(클릭의 전반부)
• MouseUp - 사용자가 마우스 버튼을 해제했을 때 발생(클릭의 후반후)
• MouseOut - 마우스 포인터가 객체의 그래픽 범위를 떠나려고 할 때 발생
• MouseOver - 마우스 포인터가 객체의 그래픽 범위를 진입하려고 할때 발생
• MouseMove - 마우스 포인터가 객체의 그래픽 범위 안에서 마우스 포인터를 움직이려 할때 발생
• ContextMenu - 사용자가 오른쪽 마우스 버튼을 클릭했을 때 발생

이벤트명 앞에 on을 사용하면 된다. onclick...

버튼을 클릭할 때 어떤 것을 실행하는 함수명을 handleBtnSignupClick으로 한 경우

버튼의 querySelector로 가져온 element 변수를 btnSignup으로 한 경우

다음과 같이 엘리먼트와 이벤트 핸들러를 연결할 수 있다. 

btnSignup.onclick = handleBtnSignupClick;

그렇다면 사용자가 키보드로 id, password 등을 입력했을 때 어떤 이벤트를 주면 좋을까?

<keyboard>

• KeyPress - 키보드를 누르거나 해제할 때 발생
• KeyDown - 키보드를 눌렀지만 아직 해제 않지 않았을 때 발생
• KeyUp - 키보드가 해제되었을 때 발생
• TextInput (글을 썼던 시점에는 웹킷 브라우저에서만 가능) - 텍스트에 붙여넣기나 말하기를 하거나 또는 키보드로 입력했을 때 발생. 이 이벤트는 이 문서에 포함하지 않을 것이다.

내가 키보드를 누른 다음에 유효한지 아닌지를 사용할 키보드 이벤트로 onkeyup를 사용하겠다. 

 

4. DOM

1. document.querySelector로 html의 element를 가져온다. 

id만을 생각해 보면 엘리먼트 변수 설정을 생각하면

const formId = document.querySelector("#input-id");
const inputId = document.querySelector("#input-id input");

2. id를 체크하는 핸들러, password를 체크하는 핸들러, password re를 체크하는 핸들러, email를 체크하는 핸들러, 버튼을 클릭하는 핸들러를 생성한다. 

id를 체크해서 유효한지 안 한 지를 체크하여 유효하면 setAsValid함수를 호출하여 valid 시각효과를 주고 유효하지 않으면 displayErrorMessage함수를 호출하여 에러 메시지를 출력하면서 붉은 색 시각적 피드백 효과를 준다. 

id check 핸들러 함수는 다음과 같다.

function handleIdChange() {
  //두 함수를 호출하여 8자이상, 영문과 숫자만 입력을 체크한다
  let valid = moreThanLength(inputId.value, 8);
  let validNumEng = onlyNumberAndEnglish(inputId.value);
  if (valid && validNumEng) {
    setAsValid("#input-id");
  } else if (!valid && validNumEng) {
    displayErrorMessage("#input-id", "id 8글자 이상 입력하세요");
  } else if (!validNumEng && valid) {
    displayErrorMessage("#input-id", "id는 영문 혹은 숫자로만 입력하세요");
  }
}

3.  유효성 함수를 생성한다.

id의 길이를 8자 이상인지 확인하는 유효성 함수, 숫자와 영문만 받는 유효성 함수를 생성한다.

function moreThanLength(str, n) {
  return str.length >= n; 
}

// 영어 또는 숫자만 가능,한글 안됨
function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}

4. 시각적 피드백 효과를 주는 함수를 생성한다. 

에러메시지 보여주는 시각 피드백

function displayErrorMessage(selector, text) {
  let form = document.querySelector(selector);
  form.classList.remove("valid");
  form.classList.add("invalid");
  
  //font awesome의 체크표시를 x표시로 변경하기 위해 remove와 add를 사용
  let icon = form.querySelector(".fa");
  icon.classList.remove("fa-check-circle");
  icon.classList.add("fa-times");

  let msg = form.querySelector(".message");
  msg.textContent = text;
}

valid 때 보여주는 시각 피드백

selector값을 받아 class명을 invalid에서 valid로 변경(remove, add)

i 태그의 class명을 fa-times -> fa-check-circle로 변경

에러메시지 textContent을 공백으로 변경

function setAsValid(selector) {
  let form = document.querySelector(selector);
  form.classList.remove("invalid");
  form.classList.add("valid");

  let icon = form.querySelector(".fa");
  icon.classList.remove("fa-times");
  icon.classList.add("fa-check-circle");

  let msg = form.querySelector(".message");
  msg.textContent = "";
}

엘리먼트와 이벤트 핸들러를 연결시키면 맨 위와 같은 유효성 검사(시각적 피드백을 겸한)를 한 간단한 회원가입을 만들 수 있다. 

 

* 공부하는 입장에 쓴 글이기에 부족하고 잘못된 것이 있을 수 있습니다. 댓글로 의견 나누어 주세요