滑动验证码必须前后端协同完成，前端仅采集行为并提交token，需拦截submit、等待组件异步验证通过后才提交，且token字段名、位置、格式须与后端严格一致。
滑动验证码不是前端能独立完成的校验
直接在 index.html 里加个 required 或调用 form.checkValidity()，完全无效——浏览器根本不知道滑动结果是否合法。滑动验证必须前后端协同：前端只负责采集行为、提交 token；后端才是出题人和阅卷人。常见错误是表单 submit 事件触发后立刻发包，此时滑动组件可能还没加载完，更没返回有效凭证。
必须拦截 form submit 并等待异步验证完成
HTML 表单默认同步提交，但滑动验证（如极验 getValidate()、腾讯云 ticket 获取）本质是异步操作。不手动拦截，就等于跳过验证。
- 给
<form></form>绑定onsubmit="return false"或用event.preventDefault() - 在提交逻辑里显式调用滑动 SDK 的验证方法，例如：
await captchaObj.getValidate()（Promise 版）或用onSuccess回调设标志位 - 验证失败时，禁止调用
form.submit()，并提示用户（不要依赖 HTTP 状态码判断） - 别在按钮
onclick里直接form.submit()，那会绕过你的onsubmit钩子
token 字段名、位置、格式必须与后端严格一致
很多集成失败，根源是字段对不上。不同厂商字段名差异很大：
- 极验 v3 要求三个字段：
geetest_challenge、geetest_validate、geetest_seccode - 腾讯云 TCAPTCHA 只传两个：
ticket和randstr - 网易易盾用的是
token+sig
检查点：
- 确认后端接口文档要求的字段名，包括大小写、下划线、驼峰
- token 必须作为表单字段（
<input type="hidden">）塞进<form></form>内，而不是拼在 URL query string 里 - 用 Chrome DevTools 的 Network 面板查看实际请求 payload，确认字段存在、值非空、格式像 base64 或哈希串
- 若用 Vue/React 动态管理表单，得手动同步 token 到 state 或 FormData，SDK 自动注入的隐藏域可能失效
移动端 touch 事件干扰常导致滑动失败
iOS Safari 和部分安卓 WebView 中，表单内嵌滑动组件容易因 touchmove 默认行为被阻止而卡住——滑块拖不动、松手即重置。
- 在滑动容器上加
style="-webkit-user-select: none; touch-action: pan-x;" - 避免父级元素（如
<form></form>或滚动容器）监听touchmove并调用preventDefault() - 测试真机，别只靠 Chrome 模拟器；尤其注意微信内置浏览器对
iframe内滑动组件的限制
真正上线前，最易被忽略的是：后端是否真的用该 token 去调用了对应厂商的验签接口？前端一切看起来成功，但后端漏掉这一步，整个验证形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
