表单提交拦截的关键是监听form的submit事件并立即preventDefault()，再调用checkValidity()或reportValidity()校验并触发原生提示，而非依赖自动阻断或监听按钮click。
在表单提交瞬间用 checkValidity() 拦截非法数据，关键不是“调用它”，而是**阻止默认提交行为 + 主动校验 + 人工控制反馈**。浏览器原生的 submit 事件发生时，表单已准备发送——此时调用 checkValidity() 只是获取结果，真正起拦截作用的是 event.preventDefault()。
监听 submit 事件并阻止默认行为
必须在 元素上监听 submit，且第一时间调用 preventDefault()。否则浏览器会直接提交，JS 校验就失去意义。
- 不要监听按钮的
click：可能绕过回车提交、API 提交等场景 - 确保绑定在
form元素本身，而非内部按钮 - 示例：
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault(); // ✅ 关键一步：先拦住
if (this.checkValidity()) {
// 合法，可手动提交或发 AJAX
this.submit(); // ❌ 注意：这会绕过当前监听器，触发原生提交（无拦截）
// 更推荐：用 fetch 或 FormData 发送
}
});
利用 checkValidity 触发原生提示但不依赖它自动阻断
checkValidity() 本身不会阻止提交，但它会触发浏览器对无效字段的聚焦和气泡提示（如 “请填写此字段”）。这个行为是副作用，前提是字段有 required、type="email" 等约束属性。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 确保 input 有语义化约束：
required、minlength、pattern、type="number"等 - 调用
checkValidity()后，若返回false，首个无效字段会自动获得焦点，浏览器显示原生验证消息 - 注意：某些情况（如
setCustomValidity('')被清空后）可能抑制提示，需手动调用reportValidity()
增强控制：结合 reportValidity 和自定义反馈
如果想确保提示一定出现，或需要统一处理逻辑，用 reportValidity() 替代单纯 checkValidity()：
-
reportValidity()=checkValidity()+ 强制显示原生错误提示（即使之前被 suppress） - 适合在
submit处理中直接使用：
form.addEventListener('submit', function (e) {
e.preventDefault();
if (!this.reportValidity()) {
// 至少一个字段无效，浏览器已弹提示，无需额外操作
return;
}
// 此处执行合法提交逻辑（如 fetch）
});
避免常见陷阱
- 别在 input 上监听 input/blur 做 submit 拦截：它们不等于表单提交时机
- 不要在 checkValidity 后直接 this.submit()：这会跳过 JS 控制，丢失后续逻辑（如埋点、防重提）
-
动态修改字段约束后（如 JS 设置 required），需手动调用
input.setCustomValidity('')清除旧状态，否则checkValidity可能误判 -
移动端 Safari 对 reportValidity 支持较晚（iOS 12.2+），低版本需 fallback 到手动检查
validity.valid并 alert
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
