js 추가

GDSC-DEU · Jul 2, 2024 · e9969be · e9969be
1 parent 4815efd
commit e9969be
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/minyook/MYWEB_css/signup.css b/minyook/MYWEB_css/signup.css
@@ -44,8 +44,8 @@ body {
 
 .login-btn {
   display: block;
-  width: 96%;
-  height: 25px;
+  width: 100%;
+  height: 40px;
   background-color: #000;
   color: #fff;
   padding: 10px;

diff --git a/minyook/MYWEB_html/signup.html b/minyook/MYWEB_html/signup.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="../MYWEB_css/signup.css" />
+    <script defer src="/minyook/MYWEB_js/main.js"></script>
     <title>Trevelo</title>
   </head>
   <body>
@@ -13,19 +14,16 @@
 
     <div class="login-form">
       <form id="loginForm">
-        <input type="text" id="name" placeholder="이름" />
-        <input type="email" id="email" placeholder="이메일" />
+        <input type="text" id="name" placeholder="이름" required/>
+        <input type="email" id="email" placeholder="이메일" required/>
         <input type="password" id="password" placeholder="비밀번호" />
         <input
           type="password"
           id="Confirmpassword"
           placeholder="비밀번호 재확인"
         />
-        <p>
-          <a class="login-btn" href="../MYWEB_html/login.html"
-            >회원가입</a
-          >
-        </p>
+        <input type="submit" class="login-btn" value="회원가입">
+
       </form>
     </div>
   </body>

diff --git a/minyook/MYWEB_js/main.js b/minyook/MYWEB_js/main.js
@@ -0,0 +1,36 @@
+document.querySelector('#loginForm').addEventListener('submit', function(e){
+    e.preventDefault(); // 폼 전송을 막음
+
+    var name = document.querySelector('#name').value.trim();
+    var email = document.querySelector('#email').value.trim();
+    var password = document.querySelector('#password').value.trim();
+    var confirmPassword = document.querySelector('#Confirmpassword').value.trim();
+
+    if (name === '' || email === '' || password === '' || confirmPassword === '') {
+        alert('회원가입 폼을 작성하세요');
+        console.log('회원가입 폼을 작성하지 않았습니다');
+        return;
+    }
+
+    // 비밀번호 검사를 위해 test 함수 호출
+    if (test(password, confirmPassword)) {
+        // 모든 검사가 통과되면 login.html로 이동
+        window.location.href = 'login.html';
+    }
+});
+
+function test(password, confirmPassword) {
+    if (password.length < 8) {
+        alert('입력한 글자가 8글자 이상이어야 합니다.');
+        console.log('비밀번호가 8글자 이상이 아님');
+        return false;
+    }
+    if (password !== confirmPassword) {
+        alert("비밀번호가 일치 하지 않습니다.");
+        console.log('비밀번호가 일치하지 않음');
+        return false;
+    } else {
+        alert("비밀번호가 일치합니다");
+        return true;
+    }
+}