From 92956b84ab9755ff0ae15d8c3fc7c82835fd6cb9 Mon Sep 17 00:00:00 2001
From: jdysya <1912377458@qq.com>
Date: Mon, 17 Feb 2025 10:35:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(register):=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E8=AE=BE=E5=A4=87=E9=80=82=E9=85=8D=E5=B9=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=AF=86=E7=A0=81=E5=8C=B9=E9=85=8D=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改移动端响应式布局，确保页面在小屏设备上的可用性
- 添加密码匹配错误提示，提高用户注册体验
- 实现密码输入实时验证和表单提交前验证
---
 gateway/templates/register.html | 81 +++++++++++++++++++++++++++------
 1 file changed, 66 insertions(+), 15 deletions(-)
diff --git a/gateway/templates/register.html b/gateway/templates/register.html
index 58812d4..fa8f935 100644
--- a/gateway/templates/register.html
+++ b/gateway/templates/register.html
@@ -65,7 +65,7 @@
             box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
         }
 
-        /* 新增响应式设计 */
+        /* 修改移动端响应式布局 */
         @media (max-width: 480px) {
             body {
                 padding: 1rem;
@@ -73,9 +73,14 @@
             .login-container {
                 padding: 1.5rem;
                 margin-top: 2rem;
+                width: calc(100% - 2rem); /* 确保容器不会超出屏幕 */
             }
             .form-group-row {
                 grid-template-columns: 1fr; /* 移动端单列布局 */
+                gap: 0.5rem;
+            }
+            input, select {
+                font-size: 16px; /* 防止iOS自动放大输入框 */
             }
         }
 
@@ -177,31 +182,50 @@
         .form-select {
             display: none;
         }
+
+        /* 添加密码匹配提示样式 */
+        .password-match-error {
+            color: var(--error-color);
+            font-size: 0.875rem;
+            margin-top: 0.25rem;
+            display: none;
+        }
+        
+        .password-match-error.show {
+            display: block;
+        }
     </style>
 </head>
 <body>
     <div class="login-container">
         <h1>新用户注册</h1>
-        <form action="/register" method="post">
+        <form action="/register" method="post" id="registerForm">
             <div class="form-group">
                 <label for="fullname">真实姓名</label>
                 <input type="text" id="fullname" name="fullname" required 
                        placeholder="请输入真实姓名">
             </div>
             
-            <div class="form-group-row">
-                <div class="form-group">
-                    <label for="mobile">手机号码</label>
-                    <input type="tel" id="mobile" name="mobile" required
-                           pattern="[0-9]{11}" 
-                           placeholder="请输入11位手机号">
-                </div>
-                <div class="form-group">
-                    <label for="password">登录密码</label>
-                    <input type="password" id="password" name="password" required
-                           minlength="6"
-                           placeholder="至少6位密码">
-                </div>
+            <div class="form-group">
+                <label for="mobile">手机号码</label>
+                <input type="tel" id="mobile" name="mobile" required
+                       pattern="[0-9]{11}" 
+                       placeholder="请输入11位手机号">
+            </div>
+
+            <div class="form-group">
+                <label for="password">登录密码</label>
+                <input type="password" id="password" name="password" required
+                       minlength="6"
+                       placeholder="至少6位密码">
+            </div>
+
+            <div class="form-group">
+                <label for="confirmPassword">确认密码</label>
+                <input type="password" id="confirmPassword" name="confirmPassword" required
+                       minlength="6"
+                       placeholder="请再次输入密码">
+                <div class="password-match-error">两次输入的密码不一致</div>
             </div>
 
             <div class="form-group">
@@ -223,5 +247,32 @@
         <p class="error-message">{{ .error }}</p>
         {{ end }}
     </div>
+
+    <script>
+        const form = document.getElementById('registerForm');
+        const password = document.getElementById('password');
+        const confirmPassword = document.getElementById('confirmPassword');
+        const errorDiv = document.querySelector('.password-match-error');
+
+        // 实时检查密码匹配
+        function checkPasswords() {
+            if (confirmPassword.value && password.value !== confirmPassword.value) {
+                errorDiv.classList.add('show');
+                return false;
+            }
+            errorDiv.classList.remove('show');
+            return true;
+        }
+
+        confirmPassword.addEventListener('input', checkPasswords);
+        password.addEventListener('input', checkPasswords);
+
+        // 表单提交验证
+        form.addEventListener('submit', function(e) {
+            if (!checkPasswords()) {
+                e.preventDefault();
+            }
+        });
+    </script>
 </body>
 </html> 
\ No newline at end of file
