理解 onsubmit 事件的触发时机及其在表单处理中的核心作用
掌握三种绑定 onsubmit 事件的方法（HTML 内联、JS 属性、addEventListener）
能够使用 onsubmit 实现表单验证、阻止默认提交、AJAX 提交等常见功能
了解事件对象的使用及如何控制表单提交行为
onsubmit 是 HTML 表单（<form>）特有的事件，当用户尝试提交表单时触发（例如点击 <input type="submit"> 或按 Enter 键）。
关键特性：
仅适用于
<form>元素在实际提交发生之前触发，因此可用于拦截或验证
若事件处理函数返回
false或调用event.preventDefault()，可阻止表单默认提交
<form onsubmit="return validateForm()">
<!-- 表单内容 -->
</form>注意：若要阻止提交，函数必须
return false
form.onsubmit = function(event) {
if (!isValid()) {
event.preventDefault(); // 阻止提交
return false;
}
};addEventListener()form.addEventListener("submit", function(event) {
if (!isValid()) {
event.preventDefault();
alert("请填写完整信息！");
}
});推荐使用
addEventListener：支持多个监听器，代码更清晰，符合现代开发规范。
使用属性赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onsubmit 基础示例</title>
<style>
body { text-align: center; padding: 30px; font-family: Arial; }
h1 { color: green; }
form { margin: 20px auto; max-width: 300px; }
input[type="text"] { padding: 6px; width: 180px; }
input[type="submit"] { margin-top: 10px; padding: 6px 12px; }
</style>
</head>
<body>
<h1>编程学习网</h1>
<h2>HTML DOM onsubmit 事件</h2>
<form id="userForm" action="#">
姓名：<input type="text" name="username"><br>
<input type="submit" value="提交">
</form>
<script>
document.getElementById("userForm").onsubmit = function() {
alert("表单已提交！");
// 此处未阻止提交，页面会跳转到 action="#"（即当前页）
};
</script>
</body>
</html>使用 addEventListener
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证示例</title>
<style>
body { text-align: center; padding: 30px; font-family: Arial; }
h1 { color: green; }
.error { color: red; font-size: 0.9em; }
</style>
</head>
<body>
<h1>编程学习网</h1>
<h2>带验证的表单提交</h2>
<form id="registerForm" action="/submit" method="POST">
邮箱：<input type="email" id="email" required><br>
<span id="emailError" class="error"></span><br><br>
<input type="submit" value="注册">
</form>
<script>
document.getElementById("registerForm").addEventListener("submit", function(event) {
const emailInput = document.getElementById("email");
const errorSpan = document.getElementById("emailError");
const email = emailInput.value;
// 简单邮箱格式验证
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
errorSpan.textContent = "请输入有效的邮箱地址！";
event.preventDefault(); // 阻止提交
} else {
errorSpan.textContent = ""; // 清除错误
// 此处可改为 AJAX 提交，避免页面跳转
console.log("表单验证通过，准备提交...");
}
});
</script>
</body>
</html>效果：
输入无效邮箱 → 显示错误，不提交
输入有效邮箱 → 清除错误，正常提交（或可替换为 AJAX）
AJAX 提交替代页面跳转
form.addEventListener("submit", async (event) => {
event.preventDefault(); // 阻止默认提交（避免页面刷新）
const formData = new FormData(form);
try {
const response = await fetch("/api/register", {
method: "POST",
body: formData
});
if (response.ok) {
alert("注册成功！");
form.reset(); // 清空表单
} else {
alert("提交失败，请重试。");
}
} catch (error) {
console.error("网络错误:", error);
alert("网络异常，请检查连接。");
}
});优势：无刷新提交，用户体验更流畅。
仅 <form> 支持 onsubmit
普通 <div> 或 <button> 无法触发此事件。
触发方式多样
不仅限于点击“提交”按钮，按 Enter 键（在文本框内）也会触发。
阻止提交的两种方式
返回 false（仅限内联或属性赋值方式）
调用 event.preventDefault()（推荐，适用于所有方式）
不要混淆 onsubmit 与 onclick
按钮的 onclick 在点击时触发，但不能阻止表单提交；而 onsubmit 是表单级别的控制点。
onsubmit 是 <form> 元素的专属事件，在提交前触发
可用于验证、拦截、异步提交等关键操作
推荐使用 addEventListener("submit", handler) 绑定
通过 event.preventDefault() 可灵活控制是否真正提交
是构建健壮、用户友好的表单交互的核心机制
如果在 onsubmit 事件中发起一个异步请求（如 fetch），但没有调用 preventDefault()，会发生什么？为什么？
如何实现“提交按钮点击后变为‘提交中...’并禁用，提交成功后再恢复”？请写出关键代码。
为什么说在表单验证中，前端 onsubmit 验证不能替代后端验证？两者应如何配合？