Javascript: 如何使用 onsubmit 阻止表单默认提交？

在 Web 开发中，我们经常需要使用表单来提交用户数据。当用户点击表单提交按钮时，表单会自动向服务器发送请求并刷新页面，这是表单的默认行为。但是，在某些情况下，我们可能需要自定义表单提交行为，比如验证表单数据、异步提交表单等。在这种情况下，可以使用 JavaScript 的 onsubmit 事件来阻止表单默认提交行为。

什么是 onsubmit 事件？

onsubmit 事件是 HTML 表单元素的一个属性，用于指定表单提交时所触发的 JavaScript 函数。当表单提交时，浏览器会自动执行这个函数，并根据函数返回值来决定是否继续执行表单默认提交行为。

语法

<form onsubmit="return functionName()">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

在这个例子中，我们为表单元素添加了 onsubmit 属性，指定了一个名为 functionName 的 JavaScript 函数。当用户点击提交按钮时，浏览器会自动执行这个函数，并根据其返回值来决定是否继续执行表单默认提交行为。

如何使用 onsubmit 阻止表单默认提交？

在 JavaScript 中，我们可以使用 onsubmit 事件来阻止表单默认提交行为。具体来说，要阻止表单默认提交，我们需要在 onsubmit 回调函数中返回 false。这样，浏览器就会停止表单提交，并且不会重新加载页面。

<form onsubmit="return false;">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

上面的代码中，我们使用 onsubmit 回调函数返回 false，以阻止表单默认提交行为。这样，当用户点击表单提交按钮时，浏览器就不会向服务器发送请求并刷新页面了。

如何使用 onsubmit 验证表单数据？

除了阻止表单默认提交，onsubmit 事件还可以用于表单数据的验证。在提交表单之前，我们可以通过 JavaScript 来检查表单数据是否合法，如果数据不合法，则可以在 onsubmit 回调函数中返回 false，以阻止表单提交。

<form onsubmit="return validate()">
  <label for="textInput">请输入手机号码：</label>
  <input type="text" id="textInput" name="phoneNum" required>
  <button type="submit">提交</button>
</form>

<script>
function validate() {
  let phoneNum = document.getElementById("textInput").value;
  if (!/^1\d{10}$/.test(phoneNum)) {
    alert("请输入有效的手机号码！");
    return false;
  }
  return true;
}
</script>

在这个例子中，我们使用了一个名为 validate 的函数来验证用户输入的手机号码是否符合要求。如果手机号码不符合要求，则弹出一个提示框，并返回 false，阻止表单提交。如果手机号码符合要求，则返回 true，允许表单提交。

总结

通过 onsubmit 事件，我们可以自定义表单的提交行为，包括阻止默认提交行为、验证表单数据等。在使用 onsubmit 事件时需要注意以下几点：

• onsubmit 事件需要添加到表单元素上；
• onsubmit 回调函数需要返回 false 才能阻止表单默认提交行为；
• onsubmit 回调函数可以使用 JavaScript 来验证表单数据；
• onsubmit 回调函数中可以向服务器发送异步请求。