可通过监听form元素submit事件并调用event.preventDefault()拦截默认提交，推荐用addEventListener绑定；获取数据首选FormData对象；需注意form.submit()不触发submit事件。
在 JavaScript 中，可以通过监听表单的 submit 事件并调用 event.preventDefault() 来拦截默认提交行为，从而自定义处理逻辑（比如表单验证、异步提交、数据预处理等）。
绑定 submit 事件监听器
推荐为 <form> 元素添加事件监听器，而不是给提交按钮绑定 click。因为表单可通过回车键、API 调用（form.submit()）、或辅助技术触发提交，只有 submit 事件能捕获所有情况。
- 使用
addEventListener：
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止页面跳转或刷新
// 自定义逻辑写在这里
});- 也可以用内联
onsubmit属性（不推荐，不利于维护）：
<form onsubmit="handleSubmit(event)">
获取表单数据的常用方式
拦截后，通常需要读取用户输入。有几种可靠方法：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
用
FormData对象（最推荐）：自动收集所有带name的表单控件值，支持文件上传，语义清晰：
const formData = new FormData(event.target); const data = Object.fromEntries(formData.entries()); // 转为普通对象（注意：同名多值会丢失）
- 手动读取字段值：适合需精细控制或处理复选框/多选等复杂场景：
const email = event.target.email.value.trim(); const agree = event.target.agree.checked;
执行自定义提交逻辑
拦截后常见操作包括验证、发送 AJAX、显示加载状态等：
立即学习“Java免费学习笔记（深入）”；
- 简单验证示例：
if (!email || !email.includes('@')) {
alert('请输入有效邮箱');
return;
}- 用
fetch异步提交：
fetch('/api/login', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(result => {
if (result.success) {
window.location.href = '/dashboard';
}
});注意绕过 submit 事件的陷阱
以下情况不会触发 submit 事件，需额外处理：
- 直接调用
form.submit()方法 —— 它**不触发**submit事件，也不会执行监听器；如需统一拦截，应封装提交函数，避免裸调submit()。 - 表单中存在
type="submit"按钮但被禁用（disabled），或formnovalidate属性开启时，仍会触发submit事件，但浏览器跳过原生校验 —— 你的 JS 校验逻辑仍需自行执行。
