[이태경] sprint4 #123
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| // 에러 메세지 생성 함수 | ||
| const formEl = document.querySelector(".member-box__form"); | ||
| const submitBtn = document.querySelector(".member-box__form .form__submitBtn"); | ||
|
|
||
| const VALIDATION_RULE = { | ||
| nickname: { | ||
| noValue: { | ||
|
||
| msg: "닉네임을 입력해주세요.", | ||
| }, | ||
| }, | ||
| email: { | ||
| noValue: { | ||
| msg: "이메일을 입력해주세요.", | ||
| }, | ||
| validation: { | ||
| pattern: | ||
| /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/, | ||
| msg: "잘못된 이메일 형식입니다.", | ||
| }, | ||
| }, | ||
| password: { | ||
| noValue: { | ||
| msg: "비밀번호를 입력해주세요.", | ||
| }, | ||
| validation: { | ||
| pattern: /^[0-9a-zA-Z]{8}/, | ||
| msg: "비밀번호를 8자 이상 입력해주세요.", | ||
| }, | ||
| }, | ||
| passwordConfirm: { | ||
| noValue: { | ||
| msg: "비밀번호를 입력해주세요.", | ||
| }, | ||
| validation: { | ||
| msg: "비밀번호가 일치하지 않습니다.", | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| // 에러 메세지 생성 | ||
| function createErrorMsg(text, inputBox) { | ||
| // 에러 메세지 중복 생성 방지 | ||
| if (inputBox.querySelector(".error-msg")) return; | ||
|
|
||
| const msg = document.createElement("p"); | ||
| msg.textContent = text; | ||
| msg.classList.add("error-msg"); | ||
| inputBox.classList.add("isError"); | ||
| inputBox.append(msg); | ||
| } | ||
|
|
||
| // input에 값 입력시 isError / isPass 초기화 | ||
| function changeInputReset(e) { | ||
| const inputBox = e.target.closest(".form__input-box"); | ||
|
|
||
| if (inputBox.classList.contains("isError")) { | ||
| inputBox.classList.remove("isError"); | ||
| inputBox.querySelector(".error-msg").remove(); | ||
| } | ||
|
|
||
| if (inputBox.classList.contains("isPass")) { | ||
| inputBox.classList.remove("isPass"); | ||
| } | ||
| } | ||
|
|
||
| // 페이지내의 전체 input validation 통과했는지 확인 | ||
| function checkAllPass() { | ||
| const inputs = document.querySelectorAll(".member-box__form .input"); | ||
| const isAllPass = Array.from(inputs).every((input) => | ||
| input.closest(".form__input-box").classList.contains("isPass") | ||
| ); | ||
|
|
||
| submitBtn.disabled = !isAllPass; | ||
| } | ||
|
|
||
| // 항목별 validation 검사 :: 닉네임 | ||
| function checkValidationNickname(value) { | ||
| if (value.length) return true; | ||
| return false; | ||
| } | ||
|
|
||
| // 항목별 validation 검사 :: 이메일 | ||
| function checkValidationEmail(value) { | ||
| return VALIDATION_RULE.email.validation.pattern.test(value); | ||
| } | ||
|
|
||
| // 항목별 validation 검사 :: 패스워드 | ||
| function checkValidationPassword(value) { | ||
| return VALIDATION_RULE.password.validation.pattern.test(value); | ||
| } | ||
|
|
||
| // 항목별 validation 검사 :: 패스워드 확인 | ||
| function checkValidationPasswordConfirm(value) { | ||
| const password = document.querySelector("#password"); | ||
| return password.value === value; | ||
| } | ||
|
|
||
| // validation 검사 | ||
| function checkValidation({ target }) { | ||
|
||
| if (!target.classList.contains("input")) return; | ||
| const targetValue = target.value; | ||
| const targetId = target.id; | ||
| const inputBox = target.closest(".form__input-box"); | ||
| let isValidation; | ||
|
|
||
| // 값이 없는지 확인 | ||
| if (!target.value.length) { | ||
| // 값이 없으면, | ||
| createErrorMsg(VALIDATION_RULE[targetId].noValue.msg, inputBox); | ||
| checkAllPass(); | ||
| return; | ||
| } | ||
|
|
||
| // 항목별 validation 검사 | ||
| switch (targetId) { | ||
| case "nickname": | ||
| isValidation = checkValidationNickname(targetValue); | ||
|
||
| break; | ||
| case "email": | ||
| isValidation = checkValidationEmail(targetValue); | ||
| break; | ||
| case "password": | ||
| isValidation = checkValidationPassword(targetValue); | ||
| break; | ||
| case "passwordConfirm": | ||
| isValidation = checkValidationPasswordConfirm(targetValue); | ||
| break; | ||
| } | ||
|
|
||
| if (!isValidation) { | ||
| // 항목별 validation 실패시 | ||
| createErrorMsg(VALIDATION_RULE[targetId].validation.msg, inputBox); | ||
| } else { | ||
| // 항목별 validation 통과시 | ||
| inputBox.classList.add("isPass"); | ||
| } | ||
| checkAllPass(); | ||
|
||
| } | ||
|
|
||
| function togglePassword(e) { | ||
| if (!e.target.closest(".input-box__toggle")) return; | ||
| const pwBox = e.target.closest(".input-box__input"); | ||
| const inputBox = pwBox.querySelector(".input"); | ||
| if (pwBox.classList.contains("pw_show")) { | ||
| pwBox.classList.remove("pw_show"); | ||
| inputBox.setAttribute("type", "password"); | ||
| } else { | ||
| pwBox.classList.add("pw_show"); | ||
| inputBox.setAttribute("type", "input"); | ||
| } | ||
| } | ||
|
Collaborator
There was a problem hiding this comment. classList.toggle을 사용하면 좀더 간결하게 만들어줄수있겠네요 :) function togglePassword(e) {
if (!e.target.closest(".input-box__toggle")) return;
const pwBox = e.target.closest(".input-box__input");
const inputBox = pwBox.querySelector(".input");
const isShow = pwBox.classList.toggle("pw_show");
inputBox.setAttribute("type", isShow ? "text" : "password");
} |
||
|
|
||
| function movePage(e) { | ||
| location.href = e.target.dataset.moveLink; | ||
| } | ||
|
|
||
| formEl.addEventListener("input", changeInputReset); | ||
| formEl.addEventListener("focusout", checkValidation); | ||
| formEl.addEventListener("click", togglePassword); | ||
| submitBtn.addEventListener("click", movePage); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NIT: isPass보다는 isValid 정도가 적당할것같네요!