스프린트미션4 에러메시지넣기

login.html

@@ -16,13 +16,21 @@
     </header>
     <main id="content">
       <label class="label">이메일</label>
-      <input type="email" class="input" placeholder="이메일을 입력해주세요" />
+      <input
+        id="email"
+        type="email"
+        class="input"
+        placeholder="이메일을 입력해주세요"
+      />
+      <p id="error_email" class="error_message"></p>
       <label class="label">비밀번호</label>
       <input
+        id="password"
         type="password"
         class="input"
         placeholder="비밀번호를 입력해주세요"
       />
+      <p id="error_password" class="error_message"></p>
       <div id="login_box">로그인</div>
       <div id="nav_footer_box">
         <p id="nav_footer_p"><b>간편 로그인하기</b></p>
@@ -37,5 +45,6 @@
     <footer id="footer">
       판다마켓이 처음이신가요? <a href="sign_up.html" id="gaip">회원가입</a>
     </footer>
+    <script src="로그인&회원가입.js"></script>
   </body>
 </html>

sign_up.html

@@ -16,21 +16,27 @@
     </header>
     <main id="content">
       <label class="label">이메일</label>
-      <input type="email" class="input" placeholder="이메일을 입력해주세요" />
+      <input id="email" class="input" placeholder="이메일을 입력해주세요" />
+      <p id="error_email" class="error_message"></p>
       <label class="label">닉네임</label>
       <input type="text" class="input" placeholder="닉네임을 입력해주세요" />
       <label class="label">비밀번호</label>
       <input
+        id="password"
         type="password"
         class="input"
         placeholder="비밀번호를 입력해주세요"
       />
+      <p id="error_password" class="error_message"></p>
       <label class="label">비밀번호 확인</label>
       <input
+        id="verifypassword"
         type="password"
         class="input"
         placeholder="비밀번호를 다시 한 번 입력해주세요"
       />
+      <p id="error_verifypassword" class="error_message"></p>
+
       <div id="login_box">회원가입</div>
       <div id="nav_footer_box">
         <p id="nav_footer_p"><b>간편 로그인하기</b></p>
@@ -46,4 +52,5 @@
       판다마켓이 처음이신가요? <a href="login.html" id="gaip">로그인</a>
     </footer>
   </body>
+  <script src="로그인&회원가입.js"></script>
 </html>

로그인&회원가입.css

@@ -64,6 +64,7 @@
   color: #f3f4f6;
   font-size: 20px;
   line-height: 32px;
+  cursor: pointer;
 }
 #nav_footer_box {
   display: flex;
@@ -102,3 +103,18 @@
 #gaip {
   color: #3692ff;
 }
+.error_message {
+  color: #f74747;
+  font-size: 14px;
+  margin-bottom: 10px;
+  margin-left: 10px;
+}
+
+.input-error {
+  border: 1px solid #f74747;
+}
+
+#login_box.disable {
+  background-color: gray;
+  pointer-events: none;
+}

로그인&회원가입.js

@@ -0,0 +1,105 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const emailInput = document.getElementById("email");
+  const passwordInput = document.getElementById("password");
+  const verifypasswordInput = document.getElementById("verifypassword");
+  const loginButton = document.getElementById("login_box");
+
+  const emailError = document.getElementById("error_email");
+  const passwordError = document.getElementById("error_password");
+  const verifypasswordError = document.getElementById("error_verifypassword");
+
+  // 이메일검증 이벤트
+  if (emailInput) {
+    emailInput.addEventListener("focusout", function () {
+      const emilStatus = emailInput.value.trim();
+      if (emilStatus === "") {
+        showError(emailInput, emailError, "이메일을 입력해주세요.");
+      } else if (!emailValidate(emilStatus)) {
+        showError(emailInput, emailError, "잘못된 이메일 형식입니다.");
+      } else {
+        hideError(emailInput, emailError);
+      }
+      transLoginButton();
+    });
+  }
+  // 비밀번호 검증 이벤트
+  if (passwordInput) {
+    passwordInput.addEventListener("focusout", function () {
+      const passwordStatus = passwordInput.value.trim();
+      if (passwordStatus === "") {
+        showError(passwordInput, passwordError, "비밀번호를 입력해주세요.");
+      } else if (passwordStatus.length < 8) {
+        showError(
+          passwordInput,
+          passwordError,
+          "비밀번호를 8자리 이상으로 입력해주세요."
+        );
+      } else {
+        hideError(passwordInput, passwordError);
+      }
+      transLoginButton();
+    });
+  }
+  // 비밀번호 확인 검증 이벤트
+  if (verifypasswordInput) {
+    verifypasswordInput.addEventListener("focusout", function () {
+      const verifypasswordStatus = verifypasswordInput.value.trim();
+      const passwordStatus = passwordInput.value.trim();
+
+      if (verifypasswordStatus.length < 8) {
+        showError(
+          verifypasswordInput,
+          verifypasswordError,
+          "비밀번호를 8자리 이상으로 입력해주세요."
+        );
+      } else if (verifypasswordStatus !== passwordStatus) {
+        showError(
+          verifypasswordInput,
+          verifypasswordError,
+          "비밀번호가 일치하지 않습니다."
+        );
+      } else {
+        hideError(verifypasswordInput, verifypasswordError);
+      }
+      transLoginButton();
+    });
+  }
+  // 로그인버튼 활성/비활성
+  function transLoginButton() {
+    const emilStatus = emailInput.value.trim();
+    const passwordStatus = passwordInput.value.trim();
+    const verifypasswordStatus = verifypasswordInput.value.trim();
+    if (
+      emilStatus !== "" &&
+      emailValidate(emilStatus) &&
+      passwordStatus !== "" &&
+      passwordStatus.length >= 8 &&
+      verifypasswordStatus === passwordStatus
+    ) {
+      loginButton.classList.remove("disabled");
+    } else {
+      loginButton.classList.add("disabled");
+    }
+  }
+  // 이메일 형식 검증
+  function emailValidate(email) {
+    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return re.test(email);
+  }
+  // 에러 표시
+  function showError(input, errorElement, message) {
+    input.classList.add("input-error");
+    errorElement.textContent = message;
+    errorElement.style.visibility = "visible";
+  }
+  // 에러 숨김
+  function hideError(input, errorElement) {
+    input.classList.remove("input-error");
+    errorElement.style.visibility = "hidden";
+  }
+
+  document.getElementById("login_box").addEventListener("click", function () {
+    if (!loginButton.classList.contains("disabled"))
+      window.location.href = "/items";
+  });
+});