회원가입에 필요한 각종 정보를 입력한다음 조건이 미달되면 에러메세지를 띄우고 조건이 통과되면 성공메세지를 띄운다.
모든 조건이 통과가 되면 콘솔창에 등록완료 메세지를 띄운다.
그리고 컴포넌트 형식으로 코드를 짰다. HTML 까지 다 만들고 기능까지 추가해서 App이라는 컴포넌트에 잘 정리하여 독립적으로 존재하도록 하였다.
component / utils 폴더로 나누고 파일의 특성별로 나누어 정리하였다. 그리고 마지막으로 checkUserInfo.js를 통해 사용자 정보를 검증한다.
main.js
utils폴더
validator 코드를 확인하고 싶다면 요기로에 방문해볼것
- HTML
- CSS
.form-control.success input {
border-color: var(--success-color);
}
- JS
array를 argument로 넘겨줘서 한꺼번에 처리했다.
Array.prototype.every() 메소드를 배웠다.
valid를 통해 모든 field의 통과여부를 관찰하고 모두 다 통과했으면 register한다. 따라서 각 함수는 조건이 부합되면 true를 아니면 false를 리턴한다.
form.addEventListener("submit", function (e) {
e.preventDefault();
// check if every fields are valid, then show successfully registered message!
// this is really interesting approach using 'Array.prototype.every' method!
const valid = [
checkRequired([username, email, password, password2]),
checkLength(username, 3, 15),
checkLength(password, 6, 25),
checkEmail(email),
checkPasswordsMatch(password, password2),
].every((check, i) => {
// console.log(i);
// console.log(check);
return check;
});
if (valid) {
console.log(
`Congratulation ${username.value}! You are successfully registered!`
);
}
});
script상에서 main.js 아래에 checkUserInfo.js를 따로 선언해야했다. 왜냐면DOM TREE가 다 생성이 되고 나서 검증을 해야하기 때문이다. APP안에서 검증을 하면 아직 DOM이 생성되기 전이므로 NULL이 떠버린다.
click 이벤트가 등록되는 요소가 형제요소라면 첫번째 형제에만 등록됨
closest는 위쪽으로(부모쪽으로) 올라가면서 찾는다. 아래쪽으로는 내려가지 않는다.
완성!