u

code/link56/link56-frontend-new/test.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>注册示例</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  .register-form {
+    background: #fff;
+    padding: 30px 40px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    width: 350px;
+  }
+
+  .register-form h2 {
+    margin-bottom: 20px;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .form-item {
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-item label {
+    margin-bottom: 6px;
+    font-size: 14px;
+  }
+
+  .form-item input {
+    padding: 8px 12px;
+    font-size: 14px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+  }
+
+  /* 验证码输入+按钮布局 */
+  .input-with-button {
+    display: flex;
+  }
+
+  .input-with-button input {
+    flex: 1;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .input-with-button button {
+    padding: 0 15px;
+    border: 1px solid #ccc;
+    border-left: none;
+    border-radius: 0 4px 4px 0;
+    background-color: #eceffd;
+    color: #4041d1;
+    cursor: pointer;
+  }
+
+  .input-with-button button.disabled {
+    background-color: #f5f7fa;
+    color: #c0c4cc;
+    cursor: not-allowed;
+  }
+
+  .form-item button[type="submit"] {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #4041d1;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+</style>
+</head>
+<body>
+
+<div class="register-form">
+  <h2>注册</h2>
+
+  <div class="form-item">
+    <label for="email">邮箱</label>
+    <input type="email" id="email" placeholder="请输入邮箱">
+  </div>
+
+  <div class="form-item">
+    <label for="code">邮箱验证码</label>
+    <div class="input-with-button">
+      <input type="text" id="code" placeholder="请输入验证码">
+      <button id="sendCode" class="disabled" disabled>发送验证码</button>
+    </div>
+  </div>
+
+  <div class="form-item">
+    <label for="password">密码</label>
+    <input type="password" id="password" placeholder="请输入密码">
+  </div>
+
+  <div class="form-item">
+    <label for="confirmPassword">确认密码</label>
+    <input type="password" id="confirmPassword" placeholder="请输入确认密码">
+  </div>
+
+  <div class="form-item">
+    <button type="submit">注册</button>
+  </div>
+</div>
+
+<script>
+  const emailInput = document.getElementById('email');
+  const sendBtn = document.getElementById('sendCode');
+  let countdown = 60;
+  let timer = null;
+
+  // 简单邮箱正则
+  const emailRegex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*\.\w+([.-]?\w+)*$/;
+
+  // 检查邮箱是否有效
+  emailInput.addEventListener('input', () => {
+    if (emailRegex.test(emailInput.value.trim())) {
+      sendBtn.disabled = false;
+      sendBtn.classList.remove('disabled');
+    } else {
+      sendBtn.disabled = true;
+      sendBtn.classList.add('disabled');
+    }
+  });
+
+  // 点击发送验证码
+  sendBtn.addEventListener('click', () => {
+    if (sendBtn.disabled) return;
+
+    sendBtn.disabled = true;
+    sendBtn.classList.add('disabled');
+    sendBtn.textContent = `${countdown}s`;
+
+    // 模拟倒计时
+    timer = setInterval(() => {
+      countdown--;
+      if (countdown <= 0) {
+        clearInterval(timer);
+        countdown = 60;
+        sendBtn.textContent = '发送验证码';
+        // 如果邮箱有效，恢复可点击
+        if (emailRegex.test(emailInput.value.trim())) {
+          sendBtn.disabled = false;
+          sendBtn.classList.remove('disabled');
+        }
+      } else {
+        sendBtn.textContent = `${countdown}s`;
+      }
+    }, 1000);
+
+    // TODO: 在这里调用你的发送验证码接口
+    console.log('发送验证码给邮箱:', emailInput.value.trim());
+  });
+</script>
+
+</body>
+</html>