From 664d888a01ea479c6c2ae8c066f0c2907a262d45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8E=E1=85=AC=E1=84=89=E1=85=A5=E1=86=BC=E1=84=8B?= =?UTF-8?q?=E1=85=B5=E1=86=A8?= Date: Thu, 26 Mar 2020 16:31:31 +0900 Subject: [PATCH] =?UTF-8?q?[#21]=20Feat:=20=EC=98=A4=EB=A5=98=20=EB=A9=94?= =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EC=B6=9C=EB=A0=A5,=20=EC=83=89=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - key값을 forEach로 돌면서, 상황에 맞는 에러메세지를 출력. - 에러메세지가 없으면 (없으면 "" 를 리턴한다) 성공 메세지로 바꿔서 출력하고, 클래스 변경으로 색 변경 - 유효한 객체를 어떻게 넣어줄지 생각중. --- FE/src/modules/constants.js | 4 +- FE/src/modules/util.js | 6 ++ FE/src/modules/validation.js | 134 +++++++++++++++++++++-------------- 3 files changed, 89 insertions(+), 55 deletions(-) diff --git a/FE/src/modules/constants.js b/FE/src/modules/constants.js index 9936bb3..32c7888 100644 --- a/FE/src/modules/constants.js +++ b/FE/src/modules/constants.js @@ -16,6 +16,8 @@ export const LIMITED_LENGTH = { password_min: 8, password_max: 16, year: 4, + age_min: 15, + age_max: 99, }; export const FORM_ID = { @@ -37,7 +39,7 @@ export const ERROR_MSG_ID = { password: "#error-msg-password", checkPassword: "#error-msg-check-password", email: "#error-msg-email", - phoneNumber: "#error-msg-phoneNumber", + phoneNumber: "#error-msg-phone", birthday: "#error-msg-birthday", interest: "#error-msg-interest", }; diff --git a/FE/src/modules/util.js b/FE/src/modules/util.js index d1dd0d3..5709feb 100644 --- a/FE/src/modules/util.js +++ b/FE/src/modules/util.js @@ -21,3 +21,9 @@ export const daysInMonth = num => { return 31; } }; + +export const toggleClass = (target, addClassName, removeClassName) => { + if (target.classList.contains(addClassName)) return; + target.classList.add(addClassName); + target.classList.remove(removeClassName); +}; diff --git a/FE/src/modules/validation.js b/FE/src/modules/validation.js index a356f00..286c7f9 100644 --- a/FE/src/modules/validation.js +++ b/FE/src/modules/validation.js @@ -1,26 +1,24 @@ import app from "./server.js"; -import { _q, daysInMonth } from "./util.js"; +import { _q, daysInMonth, toggleClass } from "./util.js"; import { PATTERN, FORM_ID, LIMITED_LENGTH, ERROR_MSG_ID, NUM_KEY_CODE_ZERO, NUM_KEY_CODE_NINE, TOGGLE_CLASS, CHECK_DELAY_TIME } from "./constants.js"; -const fetch = require("node-fetch"); - const fields = { userId: { inputElement: _q(FORM_ID.userId), + timeout: null, + selectErrorMessage() { + if (!this.isFieldValid()) return this.errorMessage.misMatch; + if (this.isDuplicate()) return this.errorMessage.duplicate; + return ""; + }, isFieldValid() { const userId = this.inputElement.value; const userIdRegex = PATTERN.userId; return userId !== "" && userIdRegex.test(userId); }, - selectErrorMessage() { - if (!this.isFieldValid()) return this.errorMessage.misMatch; - if (this.isDuplicateUserId()) return this.errorMessage.duplicate; - return ""; - }, isDuplicate() { - let timeout = null; - clearTimeout(timeout); - timeout = setTimeout(() => { + clearTimeout(this.timeout); + this.timeout = setTimeout(() => { return app.checkDuplicate(this.inputElement.value); }, CHECK_DELAY_TIME); }, @@ -34,11 +32,6 @@ const fields = { password: { inputElement: _q(FORM_ID.password), - isFieldValid() { - const password = this.inputElement.value; - const passwordRegex = PATTERN.password.all; - return password !== "" && passwordRegex.test(password); - }, selectErrorMessage() { const password = this.inputElement.value; if (password.length < LIMITED_LENGTH.password_min || password.length > LIMITED_LENGTH.password_max) { @@ -81,28 +74,67 @@ const fields = { passMessage: "비밀번호가 일치합니다.", }, + // year: { + // inputElement: _q(FORM_ID.year), + // selectErrorMessage() { + // const year = this.inputElement.value; + // const today = new Date(); + // const age = today.getFullYear() - year + 1; + // if (!this.isValidYear(age)) return this.errorMessage; + // return ""; + // }, + // isValidYear(age) { + // if (age >= LIMITED_LENGTH.age_min && age <= LIMITED_LENGTH.age_max) return true; + // return false; + // }, + // errorMessageElement: _q(ERROR_MSG_ID.birthday), + // errorMessage: "태어난 년도 4자리를 정확하게 입력하세요.", + // passMessage: "", + // }, + + // month: { + // inputElement: _q(FORM_ID.year), + // }, + + // day: { + // inputElement: _q(FORM_ID.year), + // }, + birthDay: { inputElement: { year: _q(FORM_ID.year), month: _q(FORM_ID.month), day: _q(FORM_ID.day), }, - isFieldValid() { + selectErrorMessage() { const year = this.inputElement.year.value; const month = this.inputElement.month.value; const day = this.inputElement.day.value; const today = new Date(); const thisYear = today.getFullYear(); - const limitDay = daysInMonth(month); - if (day < 1 || day > limitDay) console.log(this.inputElement.day); + const age = thisYear - year + 1; + if (!this.isValidYear(age)) return this.errorMessage.year; + if (!this.isValidAge(age, month)) return this.errorMessage.age; + if (this.isValidDayinMonth(month, day)) return this.errorMessage.day; + return ""; }, - selectErrorMessage() { - this.isFieldValid(); + isValidYear(age) { + if (age >= LIMITED_LENGTH.age_min && age <= LIMITED_LENGTH.age_max) return true; + return false; + }, + isValidAge(age, month) { + if (age >= LIMITED_LENGTH.age_min) return true; + return false; + }, + isValidDayinMonth(month, day) { + const validDay = daysInMonth(month); + if (day < 1 || day > validDay) return true; + return false; }, errorMessageElement: _q(ERROR_MSG_ID.birthday), errorMessage: { year: "태어난 년도 4자리를 정확하게 입력하세요.", - old: "만 14세 이상만 가입 가능합니다.", + age: "만 14세 이상만 가입 가능합니다.", day: "태어난 날짜를 다시 확인해주세요.", }, passMessage: "", @@ -110,15 +142,15 @@ const fields = { email: { inputElement: _q(FORM_ID.email), + selectErrorMessage() { + if (!this.isFieldValid()) return this.errorMessage; + return ""; + }, isFieldValid() { const email = this.inputElement.value; const emailRegexp = PATTERN.email; return email !== "" && emailRegexp.test(email); }, - selectErrorMessage() { - if (!this.isFieldValid()) return this.errorMessage; - return ""; - }, errorMessageElement: _q(ERROR_MSG_ID.email), errorMessage: "이메일 주소를 다시 확인해주세요.", passMessage: "", @@ -126,15 +158,15 @@ const fields = { phoneNumber: { inputElement: _q(FORM_ID.phoneNumber), + selectErrorMessage() { + if (!this.isFieldValid()) return this.errorMessage; + return ""; + }, isFieldValid() { const phoneNumber = this.inputElement.value; const phoneNumberRegexp = PATTERN.phoneNumber; return phoneNumber !== "" && phoneNumberRegexp.test(phoneNumber); }, - selectErrorMessage() { - if (!this.isFieldValid()) return this.errorMessage; - return ""; - }, errorMessageElement: _q(ERROR_MSG_ID.phoneNumber), errorMessage: "형식에 맞지 않는 번호입니다.", passMessage: "", @@ -142,33 +174,27 @@ const fields = { }; const validateFormInputs = event => { - if (event.target === fields.password.inputElement) { - console.log(fields.password.selectErrorMessage()); - } - if (event.target === fields.userId.inputElement) { - console.log(fields.userId.selectErrorMessage()); - } - if (event.target === fields.checkPassword.inputElement) { - console.log(fields.checkPassword.selectErrorMessage()); - } - if (event.target === fields.email.inputElement) { - console.log(fields.email.selectErrorMessage()); - } - if (event.target === fields.birthDay.inputElement.day) { - console.log(fields.birthDay.selectErrorMessage()); - // console.log(fields.birthDay.inputElement.month.value); - // console.log(fields.birthDay.inputElement.day.value); - } - if (event.target === fields.phoneNumber.inputElement) { - console.log(fields.phoneNumber.selectErrorMessage()); - } + Object.keys(fields).forEach(field => { + const currentField = fields[field]; + if (event.target === currentField.inputElement) { + let message = currentField.selectErrorMessage(); + const messageElement = currentField.errorMessageElement; + if (message === "") { + toggleClass(messageElement, TOGGLE_CLASS.pass, TOGGLE_CLASS.error); + message = currentField.passMessage; + } else { + toggleClass(messageElement, TOGGLE_CLASS.error, TOGGLE_CLASS.pass); + } + messageElement.innerHTML = message; + } + }); }; const preventKeypressExceptNum = event => { - const yearInput = fields.birthDay.inputElement.year; - const dayInput = fields.birthDay.inputElement.day; - const phoneNumberInput = fields.phoneNumber.inputElement; - if (event.target === yearInput || event.target === dayInput || event.target === phoneNumberInput) { + const { year } = fields.birthDay.inputElement; + const { day } = fields.birthDay.inputElement; + const phoneNumber = fields.phoneNumber.inputElement; + if (event.target === year || event.target === day || event.target === phoneNumber) { if (event.keyCode < NUM_KEY_CODE_ZERO || event.keyCode > NUM_KEY_CODE_NINE) { event.returnValue = false; }