可通过 event.preventDefault() 阻止表单默认提交，在 form 元素上绑定 submit 事件以覆盖点击按钮和回车提交；校验失败则拦截，通过后可用 form.submit() 手动提交。
可以通过 event.preventDefault() 阻止表单默认提交行为，再在 JavaScript 中执行自定义校验逻辑。关键在于给 <form> 绑定 submit 事件，而不是给按钮绑 click。
绑定 submit 事件并阻止默认提交
表单的 submit 事件会在点击提交按钮（或回车触发）时触发，且**在任何提交动作发生前**触发。此时调用 event.preventDefault() 就能完全拦截提交：
- 必须监听
form元素，不是按钮；否则可能漏掉回车提交等场景 - 不要用
return false替代preventDefault()，它还会阻止事件冒泡，不必要 - 校验通过后，如需手动提交，可用
form.submit()（注意：这会绕过所有事件监听器）
基础校验示例（用户名 + 邮箱）
假设表单结构如下：
<form id="myForm"><input type="text" name="username" required>
<input type="email" name="email" required>
<button type="submit">提交</button>
</form>
对应 JS：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // 拦截提交
const username = this.username.value.trim();
const email = this.email.value.trim();
if (!username || username.length < 2) {
alert('用户名至少 2 个字符');
return;
}
if (!/^\S+@\S+\.\S+$/.test(email)) {
alert('邮箱格式不正确');
return;
}
// 校验通过，可发送 AJAX 或继续处理
console.log('校验通过，准备提交');
// fetch('/api/register', { method: 'POST', body: new FormData(this) });
});
结合 HTML5 原生校验增强体验
可以保留 required、type="email"、pattern 等属性，它们会在 submit 触发前自动校验，并显示浏览器提示。你仍可在 submit 处理函数中调用 this.checkValidity() 判断是否通过原生校验：
-
if (!this.checkValidity()) return;可快速退出，避免重复写基础规则 - 原生校验失败时，
submit事件仍会触发，但checkValidity()返回false - 适合“先走原生，再补自定义逻辑”（比如额外检查用户名是否已存在）
异步校验（如检查用户名是否可用）
若需发请求验证（如查重），不能直接在 submit 中 await，因为事件处理器必须同步返回。正确做法是：
- 先
e.preventDefault()拦截 - 禁用提交按钮防止重复点击（
button.disabled = true） - 用
fetch或axios发请求，成功后再调用form.submit()或发 AJAX 提交 - 失败时恢复按钮、给出提示
注意：form.submit() 是原生提交，不触发 submit 事件；如需统一走 AJAX，就不要调用它，而是用 FormData 手动构造数据发送。
