[서지훈]sprint4 #130
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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 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 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,25 @@ | ||
| document.addEventListener("DOMContentLoaded",function(){ | ||
| const loginForm = document.getElementById("loginForm"); | ||
| const emailInput = document.getElementById("email"); | ||
| const passwordInput = document.getElementById("password"); | ||
| const togglePassword = document.getElementById("toggle-password"); | ||
|
|
||
| emailInput.addEventListener("focusout", function(){ | ||
| loginValidationResults.email = checkEmailValidation(); | ||
| toggleSubmitButton(); | ||
| }); | ||
|
|
||
| passwordInput.addEventListener("focusout", function() { | ||
| loginValidationResults.password = checkPasswordInputValidation(); | ||
| toggleSubmitButton(); | ||
| }); | ||
|
|
||
| togglePassword.addEventListener("click", function(){ | ||
| togglePasswordVisibility("password", "toggle-password"); | ||
| }); | ||
|
|
||
| loginForm.addEventListener("submit", function(event) { | ||
| event.preventDefault(); | ||
| window.location.href = '/items.html'; | ||
| }); | ||
| }); |
This file contains 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,181 @@ | ||
| const emailInput = document.getElementById("email"); | ||
| const nicknameInput = document.getElementById("nickname"); | ||
| const passwordInput = document.getElementById("password"); | ||
| const checkPasswordInput = document.getElementById("password-check"); | ||
|
|
||
| const loginValidationResults = { | ||
| email: false, | ||
| password: false | ||
| }; | ||
| const signupValidationResults = { | ||
| email: false, | ||
| nickname : false, | ||
| password: false, | ||
| passwordCheck : false | ||
| }; | ||
|
|
||
| // 에러 메시지 요소 생성 함수 | ||
| function createErrorMessageElement(id, message){ | ||
| const errorElement = document.createElement('span'); | ||
| errorElement.id = id; | ||
| errorElement.className = 'error-message'; | ||
| errorElement.textContent = message; | ||
| return errorElement; | ||
| } | ||
|
|
||
| // 유효성 검사 실패시, 빨간색 박스 표시 함수 | ||
| function errorDisplay(input, message) { | ||
| input.style.border = "1px solid #F74747"; | ||
| let errorElement = document.getElementById(input.id + '-error'); | ||
| if (!errorElement) { | ||
| errorElement = createErrorMessageElement(input.id + '-error', message); | ||
| input.insertAdjacentElement('afterend', errorElement); | ||
| } else { | ||
| errorElement.textContent = message; | ||
| } | ||
| errorElement.style.display = "block"; | ||
| } | ||
|
|
||
| // 상태 초기화 함수 | ||
| function errorReset(input) { | ||
| input.style.border = "none"; | ||
| const errorElement = document.getElementById(input.id + '-error'); | ||
| if (errorElement) { | ||
| errorElement.style.display = "none"; | ||
| } | ||
| } | ||
|
|
||
| // 이메일 형식을 검사하는 함수 (간단한 예시) | ||
| function emailValidationText(email) { | ||
| const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
| return emailPattern.test(email); | ||
| } | ||
|
|
||
| // 이메일 검사 함수 | ||
| function checkEmailValidation(){ | ||
| const isEmail = emailInput.value.trim(); | ||
|
|
||
| if (!isEmail) { | ||
| errorDisplay(emailInput, '이메일을 입력해주세요.'); | ||
| return false; | ||
| } else if (!emailValidationText(isEmail)) { | ||
| errorDisplay(emailInput, '잘못된 이메일 형식입니다.'); | ||
| return false; | ||
| } else { | ||
| errorReset(emailInput); | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
| //비밀번호 확인 함수 | ||
| function checkPasswordValidation(checkPasswordInput){ | ||
|
|
||
| const passwordInput = document.getElementById("password"); | ||
| const isPassword = passwordInput.value.trim(); | ||
|
There was a problem hiding this comment. 유저의 입력값을 |
||
| const minLength = 8; | ||
|
|
||
| if (!isPassword) { | ||
| errorDisplay(passwordInput, '비밀번호를 입력해주세요.'); | ||
| checkPasswordInput.disabled = true; | ||
| return false; | ||
| } else if (isPassword.length < minLength) { | ||
| errorDisplay(passwordInput, '비밀번호를 8자 이상 입력해주세요.'); | ||
| checkPasswordInput.disabled = true; | ||
| return false; | ||
| } else { | ||
| errorReset(passwordInput); | ||
| checkPasswordInput.disabled = false; | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
| function checkPasswordInputValidation(){ | ||
|
|
||
| const passwordInput = document.getElementById("password"); | ||
| const isPassword = passwordInput.value.trim(); | ||
| const minLength = 8; | ||
|
|
||
| if (!isPassword) { | ||
| errorDisplay(passwordInput, '비밀번호를 입력해주세요.'); | ||
| return false; | ||
| } | ||
| else if (isPassword.length < minLength) { | ||
| errorDisplay(passwordInput, '비밀번호를 8자 이상 입력해주세요.'); | ||
| return false; | ||
| } | ||
| else { | ||
| errorReset(passwordInput); | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // 비밀번호 일치 검사 함수 | ||
| function checkPasswordMatch(){ | ||
| const isPassword = passwordInput.value.trim(); | ||
| const isCheckPassword = checkPasswordInput.value.trim(); | ||
|
|
||
| if (!isPassword || !isCheckPassword) { | ||
| errorDisplay(passwordInput, "비밀번호를 입력해주세요."); | ||
| errorDisplay(checkPasswordInput, "비밀번호 확인을 입력해주세요."); | ||
| return false; | ||
| } | ||
| else if (isPassword !== isCheckPassword) { | ||
| errorDisplay(checkPasswordInput, "비밀번호가 일치하지 않습니다."); | ||
| return false; | ||
| } | ||
| else { | ||
| errorReset(passwordInput); | ||
| errorReset(checkPasswordInput); | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
| // 닉네임 검사 함수 | ||
| function checkNicknameValidation(){ | ||
| const isNickname = nicknameInput.value.trim(); | ||
| if (!isNickname) { | ||
| errorDisplay(nicknameInput, '닉네임을 입력해주세요.'); | ||
| return false; | ||
| } | ||
| else { | ||
| errorReset(nicknameInput); | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
| // 비밀번호 보이기 활성화 함수( 눈모양 이미지를 클릭 시, 비밀번호가 보이고, 다시 누르면 비밀번호가 보이지 않도록 ) | ||
| function togglePasswordVisibility(idInput, togglebtn){ | ||
| const passwordField = document.getElementById(idInput); | ||
| const toggleButton = document.getElementById(togglebtn); | ||
| const toggleIcon = toggleButton.querySelector("img"); | ||
|
|
||
| if(passwordField.type === "password"){ | ||
| passwordField.type = "text"; | ||
| toggleIcon.src = "/images/icons/visible.svg"; | ||
| toggleButton.alt = "비밀번호 보이기"; | ||
| } | ||
| else{ | ||
| passwordField.type = "password"; | ||
| toggleIcon.src = "/images/icons/invisible.svg"; | ||
| toggleButton.alt = "비밀번호 숨기기"; | ||
| } | ||
| } | ||
|
|
||
| // 버튼 활성화 함수( 모든 값이 들어있을 경우에 버튼 활성화, 아닐땐 비활성화 ) | ||
| function toggleSubmitButton() { | ||
| const submitButton = document.getElementById("submit-button"); | ||
| const loginAllValid = Object.values(loginValidationResults).every(value => value === true); | ||
| const signUpAllValid = Object.values(signupValidationResults).every(value => value === true); | ||
|
|
||
| if (loginAllValid) { | ||
| submitButton.removeAttribute("disabled"); | ||
| } | ||
| else if(signUpAllValid){ | ||
| submitButton.removeAttribute("disabled"); | ||
| } | ||
| else { | ||
| submitButton.setAttribute("disabled", "disabled"); | ||
| } | ||
| } | ||
|
Comment on lines
+166
to
+180
There was a problem hiding this comment.
함수는 하나의 책임만을 가지는게 낫습니다. There was a problem hiding this comment. 그럼 따로 분리해서 동작하도록 설계해보겠습니다! |
||
|
|
||
|
There was a problem hiding this comment.
|
This file contains 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,37 @@ | ||
| document.addEventListener("DOMContentLoaded",function(){ | ||
|
There was a problem hiding this comment. 스크립트 태그가 제일 아래에 있어서 DOM이 모두 로드된 후에 자바스크립트가 실행되긴 하지만 그래도 이렇게 작성해주시면 센스있는 코드가 되는것 같습니다 ! |
||
| const signupForm = document.getElementById("signupForm"); | ||
| const emailInput = document.getElementById("email"); | ||
| const nicknameInput = document.getElementById("nickname"); | ||
| const passwordInput = document.getElementById("password"); | ||
| const checkPasswordInput = document.getElementById("password-check"); | ||
| const togglePassword = document.getElementById("toggle-password"); | ||
| const checkTogglePassword = document.getElementById("check-toggle-password"); | ||
|
|
||
| emailInput.addEventListener("focusout", function(){ | ||
| loginValidationResults.email = checkEmailValidation(); | ||
| toggleSubmitButton(); | ||
|
There was a problem hiding this comment.
테스트해봤는데 자식 태그에서 signupForm.addEventListener("input", (event) => {
console.log("captured");
});There was a problem hiding this comment. 최대한 함수 여러개 쓰는 중복을 배재 시킬려고 했는데, 초기화를 생각 못했네요ㅠㅠ 한번 수정해보도록 하겠습니다! |
||
| }); | ||
| nicknameInput.addEventListener("focusout", function(){ | ||
| loginValidationResults.nickname = checkNicknameValidation(); | ||
|
There was a problem hiding this comment. const signupValidationResults = {
email: false,
nickname: false,
password: false,
passwordCheck: false,
};해당 객체를 sign up 페이지에서 사용하시려고 정의하신것 같은데 제 생각에는 이렇게 전역변수를 사용하는것은 좋지 않은 것 같습니다. There was a problem hiding this comment. 기본 flag를 초기화 해서 저장 해놓은 다음, 에러 메시지가 발생하지 않을때, true 변경해 그 값을 signupValidationResults에 하나하나 저장해서, 최종적으로 모든 값이 true일때, 버튼이 활성화 되는 형태로 구성했습니다! |
||
| toggleSubmitButton(); | ||
| }); | ||
| passwordInput.addEventListener("focusout", function() { | ||
| loginValidationResults.password = checkPasswordValidation(checkPasswordInput); | ||
| toggleSubmitButton(); | ||
| }); | ||
| checkPasswordInput.addEventListener("focusout", function() { | ||
| loginValidationResults.passwordCheck = checkPasswordMatch(); | ||
| toggleSubmitButton(); | ||
| }); | ||
| togglePassword.addEventListener("click", function(){ | ||
| togglePasswordVisibility("password", "toggle-password"); | ||
| }); | ||
| checkTogglePassword.addEventListener("click", function(){ | ||
| togglePasswordVisibility("password-check", "check-toggle-password"); | ||
| }); | ||
|
|
||
| signupForm.addEventListener("submit", function(event) { | ||
| event.preventDefault(); | ||
| window.location.href = '/login.html'; | ||
| }); | ||
| }); | ||
This file contains 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
Oops, something went wrong.
Oops, something went wrong.
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.
공통된 로직을 잘 뽑아서 중복 코드를 없애주셨네요 ~ ! 잘 하셨습니다 !