在某些情况下，您可能需要在表单提交之前进行一些操作，或者您可能想要防止表单提交。JavaScript 提供了多种方法来防止表单提交，但最常用的两种方法是：
- 使用
return false来阻止表单提交。 - 使用
event.preventDefault()来阻止表单提交。
使用 return false 来阻止表单提交
要使用 return false 来阻止表单提交，您需要在表单的 onsubmit 事件处理程序中添加 return false 语句。
<form onsubmit="return mySubmitFunction()">...</form>
function mySubmitFunction() {
// 在这里进行一些操作
return false;
}
当用户点击表单的提交按钮时，mySubmitFunction() 函数会被调用。如果 mySubmitFunction() 函数返回 false，则表单不会被提交。
使用 event.preventDefault() 来阻止表单提交
要使用 event.preventDefault() 来阻止表单提交，您需要在表单的 onsubmit 事件处理程序中添加 event.preventDefault() 语句。
<form onsubmit="mySubmitFunction(event)">...</form>
function mySubmitFunction(event) {
// 在这里进行一些操作
event.preventDefault();
}
当用户点击表单的提交按钮时，mySubmitFunction() 函数会被调用，并传递一个 event 对象。您可以使用 event.preventDefault() 来阻止表单提交。
示例
以下是一个简单的示例，展示如何使用 JavaScript 来防止表单提交：
<form onsubmit="mySubmitFunction(event)">
<input type="text" name="name" required />
<input type="submit" value="提交" />
</form>
function mySubmitFunction(event) {
// 获取表单的值
const name = event.target.name.value;
// 检查表单的值是否为空
if (name === "") {
// 表单的值为空，阻止表单提交
event.preventDefault();
alert("姓名不能为空");
}
}
在这个示例中，如果用户没有输入姓名，则表单不会被提交，并会弹出一个警示框。
注意事项
- 如果在
return false语句之前发生 JavaScript 错误，则表单仍然会被提交。为了防止这种情况发生，您应该在return false语句之前调用event.preventDefault()。
最佳实践
- 使用
event.preventDefault()来阻止表单提交，而不是使用return false。这是因为event.preventDefault()更可靠，并且可以防止在发生 JavaScript 错误时表单被提交。 - 在阻止表单提交之前，请确保您已经对表单进行了验证，并已向用户提供了反馈。