Skip to content

Commit

Permalink
[#21] Feat: 오류 메세지 출력, 색 변경 기능 추가
Browse files Browse the repository at this point in the history 
- key값을 forEach로 돌면서, 상황에 맞는 에러메세지를 출력.
- 에러메세지가 없으면 (없으면 "" 를 리턴한다) 성공 메세지로 바꿔서 출력하고, 클래스 변경으로 색 변경
- 유효한 객체를 어떻게 넣어줄지 생각중.
  • Loading branch information
@sungik-choi
sungik-choi committed Mar 26, 2020
1 parent 1cfc9a5 commit 664d888
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 55 deletions.
4 changes: 3 additions & 1 deletion FE/src/modules/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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",
};
Expand Down
6 changes: 6 additions & 0 deletions FE/src/modules/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
134 changes: 80 additions & 54 deletions FE/src/modules/validation.js
View file
Original file line number Diff line number Diff line change
@@ -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);
},
Expand All @@ -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) {
Expand Down Expand Up @@ -81,94 +74,127 @@ 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: "",
},

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: "",
},

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: "",
},
};

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;
}
Expand Down

0 comments on commit 664d888

Please sign in to comment.