const form = document.querySelector("#form");
const username = document.querySelector("#username");
const email = document.querySelector("#email");
const password = document.querySelector("#password");
const password2 = document.querySelector("#password2");
// 에러 메시지
const showError = (input, message) => {
const formControl = input.parentElement; // input의 부모 요소인 div.form-control
formControl.className = "form-control error"; // div.form-control에 class 추가
const small = formControl.querySelector("small");
small.innerText = message;
};
// 성공 메시지
const showSuccess = (input) => {
const formControl = input.parentElement;
formControl.className = "form-control success";
};
// 이메일 유효성 검사
isValidEmail = (email) => {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
// 이벤트 리스너
form.addEventListener("submit", (e) => {
e.preventDefault(); // 이벤트 객체의 기본 동작을 취소하는 메서드
// console.log(username.value);
if (username.value === "") {
showError(username, "사용자 이름은 필수입니다.");
} else {
showSuccess(username);
}
if (email.value === "") {
showError(email, "이메일은 필수입니다.");
} else if (!isValidEmail(email.value)) {
showError(email, "이메일 형식이 올바르지 않습니다.");
} else {
showSuccess(email);
}
if (password.value === "") {
showError(password, "비밀번호는 필수입니다.");
} else {
showSuccess(password);
}
if (password2.value === "") {
showError(password2, "비밀번호 확인은 필수입니다.");
} else {
showSuccess(password2);
}
});