회원 가입 (feat. 유효성 검사)

완성본!

유효성 검사(validation)

유효성 검사란, 간단히 말해 어떤 데이터의 값이 유효한지, 타당한지 확인하는 것을 의미한다.

평소에 아주 쉽게 접하는 회원 가입에서 유효성 검사를 이용한다고 한다.

• ID는 8 글자 이상(영문, 숫자만 포함)
• 비밀번호는 8 글자 이상(특수 문자, 영어, 숫자 3가지를 포함)
• 이메일은 꼭 이메일 형식(@를 꼭 입력!)과 같은 것들 등등..

오늘은 지금까지 배웠던 HTML, CSS, JAVASCRIPT(+DOM)를 바탕으로 회원 가입 페이지를 만들면서 유효성 검사를 공부해보자.

1. HTML, CSS로 UI구성(페이지 만들기)
2. JAVASCRIPT로 유효성 함수 구현
3. UI 구성 요소에 함수 연결
4. 조건을 만족하는 지 확인하는 피드백 추가

---

1. HTML,CSS로 UI구성(페이지 만들기)

우선, 유효성 검사의 프로토타입을 만들어봤다.

간략한 목업을 만들어 두고 제품의 기능에 대해서 고민하고, 무엇을 추가하고 빼야 할지 고민하는 데 도움이 되기 때문이다.

특히, 이는 협업에 있어 필수적인 과정으로, 최종 완성본을 서로가 다른 모양으로 착각하지 않도록 도와주기에 필수라고 한다.

단순히 어떻게 나타낼지만 표현 / 기능X

---

2. JAVASCRIPT로 유효성 함수 구현

회원가입 버튼을 클릭 시, 다음과 같은 조건을 만족한다면 회원가입이 완료될 것이고, 조건을 만족하지 않는다면 가입이 안 되게 만들 것이다.

1. ID : 6자 이상
2. Password : 8자 이상이면서 알파벳, 숫자 및 특수문자는 하나 이상 포함
3. PasswordCheck : Password와 같은지 확인

을 목표로 함수를 구현한다.

password의 조건은 복잡해서 (코드스테이츠에서 예시로 들어준) 정규 표현식을 이용했는데, 더 자세한 공부가 필요할 것 같다.

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

PASSWORD
function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}

---

3. UI 구성 요소에 함수 연결

queryselector 를 이용해 입력 칸에 들어간 내용을 지정하고, 함수의 변수로서 사용했다.

그래야 조건을 만족하는 지 확인할 수 있으니!

또한, 앞으로 자주 쓸 것 같은 이벤트 핸들러를 배울 수 있었다.

목표는 회원 가입 버튼을 눌렀을 때, 함수를 실행시켜 조건이 맞는 지 아닌 지를 파악하는 것이었다.

btnSignup.onclick = handleBtnSignupClick;


function handleBtnSignupClick() {
	다양한 조건식
}

---

4. 조건을 만족하는 지 확인하는 피드백 추가

classList 를 이용해 사용자에게 올바른 입력을 했는지 못했는지 알 수 있도록 피드백을 주려 했다.

 

HTML

각각 ID와 CLASS를 지정해줬다.

 

CSS

각 상황(올바른, 올바르지 못한)에 맞는 상태(색깔)을 구현

 

JAVASCRIPT

조건이 참이면 class를 추가해줘서 CSS에서 지정한 상태가 되도록 설정
이 부분에서 시간이 제일 오래 걸린 것 같다.
뭔가 어렵진 않은데 어려운 느낌... 특히 CSS! selcector 이용이 너무 헷갈렸다.
또한, id,class를 무작위로 생성하다 보니 코드가 쓸데없이 많아진 느낌이 들었다.
모든 상황에 맞는 모든 반응을 만들어주는 것이 맞겠지만, javascript에서 일일이 클래스를 추가하지 않고 한 상태만 변화 시키면 나머지는 부가적으로 따라오는 그런 코드를 더욱 공부해야겠다.

즉, 보기 좋은 코드를 짜고 싶다!