当 type="submit" 的按钮被点击时，在浏览器将其提交给服务器之前，你可以使用 JavaScript 来进行一些判断和拦截。这是一种非常常见的做法，用于：

* 表单验证: 确保用户输入的数据符合要求。
* 条件提交: 只有满足特定条件时才允许提交。
* 异步提交 (AJAX): 阻止默认的表单提交，而是通过 JavaScript 发送数据到服务器。
* 用户确认: 在提交前弹出一个确认对话框。

以下是如何实现这一点的几种主要方法：

1. 使用 onsubmit 事件处理程序 (推荐)

这是最推荐和最灵活的方式。你可以在 <form> 标签上添加 onsubmit 事件处理程序。当表单尝试提交时，这个 JavaScript 函数会被调用。

html
<form id="myForm" onsubmit="return validateForm()">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>

<button type="submit">提交</button>
</form>

<script>
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;

if (name === "") {
alert("姓名不能为空！");
return false; // 阻止表单提交
}

if (email === "") {
alert("邮箱不能为空！");
return false; // 阻止表单提交
}

// 如果所有验证都通过，允许表单提交
return true;
}
</script>


解释:

* onsubmit="return validateForm()": 当 <form> 尝试提交时，会调用 validateForm() 函数。
* return validateForm(): validateForm 函数的返回值至关重要：
* 如果返回 true，则表单会按照正常方式提交。
* 如果返回 false，则表单提交会被 阻止。

2. 使用 onclick 事件处理程序 (不推荐用于阻止提交)

你也可以在 type="submit" 的按钮上添加 onclick 事件处理程序。但需要注意的是，onclick 事件在 onsubmit 事件 之后 触发。如果你的目的是阻止表单提交，那么使用 onsubmit 是更好的选择。

html
<form id="myForm" action="/submit-form" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>

<button type="submit" onclick="checkData()">提交</button>
</form>

<script>
function checkData() {
let nameInput = document.getElementById("name");
if (nameInput.value === "") {
alert("姓名不能为空！");
// 注意：这里直接返回 false 并不能阻止表单提交，因为 onclick 在 onsubmit 之后
// 如果要阻止，还是需要在 onsubmit 里处理
}
}
</script>


为什么不推荐 onclick 来阻止提交？

* 触发顺序: onclick 在 onsubmit 之后 触发。这意味着表单已经开始进入提交流程，onclick 的 return false 可能无法完全阻止。
* 可维护性: 将表单的提交逻辑集中在 onsubmit 事件处理程序中，更符合逻辑和可维护性。
* 用户体验: 如果 onclick 阻止了提交，但表单依然尝试提交，用户可能会感到困惑。

3. 使用 event.preventDefault() (在 onsubmit 或 onclick 中)

如果你使用了 event.preventDefault()，它会阻止事件的默认行为。

* 在 onsubmit 中:

html
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>

<button type="submit">提交</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
let nameInput = document.getElementById("name");
if (nameInput.value === "") {
alert("姓名不能为空！");
event.preventDefault(); // 阻止表单提交
} else {
// 在这里可以进行 AJAX 提交或者其他异步操作
console.log("表单有效，正在处理...");
// 如果是 AJAX 提交，则不需要 event.preventDefault() 之后的默认提交
// 如果需要默认提交，可以不调用 preventDefault()
}
});
</script>


* 在 onclick 中 (如果真的需要，但仍建议 onsubmit):

html
<form id="myForm" action="/submit-form" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>

<button type="submit" id="submitButton">提交</button>
</form>

<script>
document.getElementById("submitButton").addEventListener("click", function(event) {
let nameInput = document.getElementById("name");
if (nameInput.value === "") {
alert("姓名不能为空！");
event.preventDefault(); // 阻止事件的默认行为（提交）
}
});
</script>


event.preventDefault() 的优点:

* 更明确: 清晰地表达了“阻止默认行为”。
* 更灵活: 可以在任何事件处理程序中使用。
* AJAX 友好: 当你进行 AJAX 提交时，通常需要 event.preventDefault() 来阻止默认的页面跳转。

总结:

* 最推荐: 使用 <form> 标签的 onsubmit 事件处理程序，并根据验证结果返回 true 或 false。
* 现代方法: 使用 addEventListener("submit", ...)，并在事件处理程序中使用 event.preventDefault() 来阻止提交。
* 避免: 尽量避免使用 onclick 来阻止表单的默认提交行为，因为它在触发顺序和功能上不如 onsubmit。

具体步骤:

1. 找到你的表单: 获取对 <form> 元素的引用，例如使用 document.getElementById("myForm")。
2. 添加事件监听器: 使用 addEventListener("submit", ...) 来绑定一个函数，该函数将在表单提交时被调用。
3. 编写验证逻辑: 在回调函数中，获取表单元素的值，并进行你需要的验证。
4. 阻止提交: 如果验证失败，调用 event.preventDefault()。
5. 允许提交 (或进行 AJAX): 如果验证成功，你可以选择：
* 不做任何事情，让表单默认提交。
* 进行 AJAX 请求发送数据，然后根据需要手动阻止默认提交 (event.preventDefault())。

通过这些方法，你就可以有效地在 type="submit" 提交前，利用 JavaScript 进行各种判断和控制。