真正的双重校验是前端交互层（HTML5原生校验）与前端逻辑层（JavaScript主动校验）两道独立防线，缺一不可；需配合防重复提交机制，否则仍存在并发风险。
不能只靠 confirm() 或只靠 HTML5 属性实现“双重校验”——真正的双重，指的是「前端交互层 + 前端逻辑层」两道独立防线，缺一不可。后端校验是底线，但不在这个“双重”讨论范围内。
为什么 confirm() + required 不算双重校验
用户点两次“确定”仍会重复提交；required 被删掉属性或禁用 JS 就完全失效；两者都只解决“要不要发”，不解决“能不能发对”。它们属于同一层（声明式/提示式），不是逻辑隔离的两重判断。
-
confirm()只阻断一次点击，不改变表单状态，按钮仍可再点 -
required是浏览器自动触发的验证，无法感知业务规则（如密码一致性） - 两者都无防抖、无禁用、无 loading 状态控制，实际并发提交风险极高
真正有效的双重：HTML5 原生校验 + JavaScript 主动校验
第一重靠浏览器原生能力快速拦截明显错误（空、格式错），第二重用 JS 执行业务逻辑判断（如两次密码是否一致、用户名是否已存在），二者触发时机和校验目标不同，且互不依赖。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- HTML5 层：用
required、type="email"、pattern、minlength等，提交时自动调用checkValidity() - JS 层：在
submit事件中手动调用form.checkValidity()，再叠加自定义逻辑 - 关键点：JS 层必须显式调用
checkValidity()，否则 HTML5 校验可能被绕过（比如用form.submit()直接触发）
form.addEventListener('submit', e => {
if (!form.checkValidity()) return e.preventDefault();
const pwd = form.password.value;
const confirm = form.confirm_password.value;
if (pwd !== confirm) {
form.confirm_password.setCustomValidity('密码不一致');
return e.preventDefault();
}
form.confirm_password.setCustomValidity('');
});
防止重复提交必须单独处理
这是最容易被忽略的一环。双重校验解决“内容对不对”，但不解决“发几次”。只要没锁住提交动作，慢网或手快用户就会触发多次请求。
立即学习“前端免费学习笔记（深入）”；
- 首次提交后立即设置
form.querySelector('button[type="submit"]').disabled = true - 同时建议加 loading 文本或 spinner，避免用户因无反馈而狂点
- 如果请求失败，需恢复按钮状态并清除
disabled，否则用户无法重试 - 不要只依赖
confirm()或节流函数——它们不阻止表单 DOM 状态变化
最常漏掉的是：JS 校验通过后没调用 checkValidity()，或用了 this.submit() 绕过了所有 HTML5 验证；还有就是禁用按钮却忘了在 Ajax 失败后恢复它。这两处一出问题，所谓“双重”就只剩一层薄纸。
