feat(static): 注册页获取验证码接入图形验证码

配合 gateway v0.5.4 邮件轰炸防护(/register/send_code 强制 CAPTCHA):

- register.html: 邮箱与邮箱验证码之间新增图形验证码区块(图片+输入框,复用 login 页结构)
- register.js:
  - 新增 refreshCaptcha() 复用 /captcha/image 代理路由(与 login.js 一致)
  - 新增 checkCaptcha() 校验图形验证码非空且 Token 已加载
  - 获取验证码按钮点击时先校验图形验证码,再携带 captcha_token + captcha_answer 发送
  - 无论发送成败都刷新图形验证码(Token 一次性消费)
  - 重置表单时清空图形验证码并刷新

方案 A:仅在「获取验证码」时要求 CAPTCHA,注册提交不加(邮箱验证码已是二次验证)
This commit is contained in:
qing committed 2026-08-01 02:42:15 +08:00
1 parent 0ef96c28f6
commit 6ee1eca789
2 files changed
+75 -7

No files matched your search

+9 -3
View File
@@ -13,12 +13,18 @@
<div>
<label>邮箱号:</label>
<input type="email" id="regemail" placeholder="请输入邮箱号">
<div class="code-box">验证码:
<span id="emlTip"></span>
<label>图形验证码:</label>
<div style="display:flex;align-items:center;gap:8px">
<input type="text" id="captchaAnswer" placeholder="请输入图形验证码" maxlength="4" autocomplete="off" style="flex:1;min-width:0;width:auto">
<img id="captchaImg" alt="加载中…" title="点击刷新验证码" style="width:120px;height:38px;flex:none;cursor:pointer;border:1.5px solid var(--border);border-radius:10px;box-sizing:border-box">
</div>
<span id="captchaTip"></span>
<div class="code-box">邮箱验证码:
<input type="text" id="code" placeholder="请输入6位验证码" inputmode="numeric" maxlength="6">
<input type="button" id="getCode" value="获取验证码">
<span id="codeTip"></span>
</div>
<span id="emlTip"></span>
<label>密码:</label>
<input type="password" id="regpsw" placeholder="密码至少6位">
<label>验证密码:</label>
@@ -36,6 +42,6 @@
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">蜀ICP备2024107064号-2</a>
</footer>
<script src="js/validation.js"></script>
<script src="js/register.js?v=6"></script>
<script src="js/register.js?v=7"></script>
</body>
</html>