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