TIL : 유효성 검사

1. 유효성 검사 (form validation)

사용자가 입력한 데이터 값이 특정 규칙에 맞게 입력되었는지 검증하는 것

 

· 핸들러 함수

폼 페이지에서 이벤트가 발생했을 때의 유효성 검사를 위해 매핑하는 메서드

자바스크립트를 이용하여 유효성 검사를 위한 코드를 작성

(자바스크립트는 서버에서 처리하는 것보다 속도가 빠르고 서버에 과부하를 주지 않음)

 

※ 참고 : CSS preprocessor

중첩된 CSS를 표현하기 위해 사용한다. 다음은 Sass(SCSS) 문법을 사용해 guide.css를 구조적으로 만든 예제이다.

codepen.io/igotoweb/pen/wvWYPjd

---

2. 목업 만들기

 먼저 어떤 식으로 만들지 생각해봤는데, 입력해야 하는 부분이 크게 세 곳, 회원가입 버튼 이렇게 구성했다.

 이 세 부분을 div 태그로 묶어주고 버튼을 만들어준다. 그리고 각 부분에 input, span 태그 등을 이용해 내용을 모두 완성하였다.

 난 처음에는 조건을 만족시키면 뜨는 문구가 사라지게 하는 걸 온전히 js에서 조절하려고 했는데 AMA 시간이 정말 큰 도움이 되었다!! HTML에서 class명에 hide를 추가해 준 다음 js에서 그 hide를 remove, add하는 방식으로 나타내는 것이었다.

CSS는 기존에서 약간만 내가 보기 편하게 바꾸고 넘어갔다.

---

3. 기능 작동시키기

 먼저 querySelector를 이용해 상호작용을 해야 하는 모든 엘리먼트를 전역변수로 지정한다.

 나는 아이디 길이가 6 이상이어야 하고 비밀번호 길이가 8 이상이어야 하고 마지막으로 비밀번호 확인란과 일치하는지 여부를 설정했다. 또한 아무것도 입력하지 않고 회원가입 버튼을 누른 경우에 알림창이 뜨고 정상적으로 모든 경우를 통과한 경우에 회원가입 되었다는 알림창이 뜨도록 시각적 피드백을 해주었다. 마지막에 비밀번호 확인 색상이 변경되게 하는 것이 복잡했는데 js에서 hide와 같은 방식으로 만들어 변경할 수 있었다.

 아래는 내가 만든 유효성 검사의 작동 모습이다!! 알림창과 문구들 모두 정상적으로 작동하는 것을 확인할 수 있다 :)

 

입력 내용이 없는 경우

 

회원가입!