核心是绑定onclick事件并为img的src添加时间戳或随机数强制刷新，如img.src="/captcha?"+Date.now()；后端需每次生成新验证码并与session或token绑定校验。
点击验证码图片时如何触发重新生成
核心是给 <img> 标签绑定 onclick 事件，每次点击都强制刷新其 src 地址——关键在于让 URL 带上时间戳或随机数，避免浏览器缓存旧图片。
常见错误是直接写 img.src = "/captcha"，结果连续点击返回同一张图。必须破坏缓存：
- 用
Date.now()或Math.random()拼查询参数，例如：img.src = "/captcha?" + Date.now() - 后端接口（如
/captcha）需支持无参访问，并每次返回新验证码及对应 session 或 token 校验值 - 不要在
src中硬编码固定参数（如?t=1），否则无法触发更新
表单提交前如何校验用户输入的验证码是否匹配
前端仅做“非空”提示远远不够，真正匹配逻辑必须由后端完成。前端能做的只是把用户输入和当前验证码图片关联的唯一标识（如 captcha_id）一并提交。
典型流程是：
立即学习“前端免费学习笔记（深入）”；
- 首次加载表单时，后端返回
<img src="/captcha?token=abc123">和隐藏字段<input type="hidden" name="captcha_token" value="abc123"> - 用户填写
<input name="captcha">后，提交时连同captcha_token和captcha一起发到后端 - 后端查该
token对应的验证码值（通常存于 Redis，带 TTL），比对成功才继续处理表单
切勿把验证码明文塞进前端 JS 变量或 data- 属性里——这等于直接暴露校验规则。
为什么不能只靠前端 JS 刷新而不重发请求
因为验证码本质是服务端状态：一张图片背后对应一个尚未被使用、有时效性的字符串。前端 JS 无法凭空“知道”下一个值是什么，也无法安全生成它。
试图用 canvas 绘制、或用 base64 内联图片来“绕过后端”，会导致两个严重问题：
- 验证码逻辑泄露：攻击者可直接读取 JS 代码还原生成算法
- 无法绑定用户会话：不同用户看到同一张图，或同一用户刷新页面后原 token 失效却无感知
- 绕过 CSRF 防护：若验证码不与 session/token 强绑定，整个验证形同虚设
刷新验证码时如何避免影响表单其他字段的输入状态
常见错误是整个表单 location.reload() 或用 form.reset()，导致用户刚填的用户名、邮箱全丢了。
正确做法是只更新验证码区域：
- 用独立容器包裹图片和刷新按钮，例如：
<div id="captcha-box"><img><button onclick="refreshCaptcha()">换一换</button></div> -
refreshCaptcha()函数只修改<img>的src和同步更新隐藏的captcha_token字段值 - 如果用了框架（如 Vue/React），确保
captcha_token是响应式数据，且不触发表单整体 re-render
后端生成的 captcha_token 必须每次刷新都变，且旧 token 应立即失效——这点容易被忽略，但直接关系到防暴力破解能力。
