阻止 form 表单的默认提交

表单提交的3种形式

MDN - form 提交表单时，未指定 form.action 会重新加载页面，否则跳转到 form.action。

<form>
  <input type="text" />
</form>

效果：

1，默认提交

W3C 标准定义：

当1个表单中只有1个单行文本输入字段时，在此字段中按下 Enter （回车键）的行为，浏览器应将其视为提交表单的请求。

单行文本输入字段：input.type = text number password search tel url

2，submit 提交

<form>
  <input type="submit" value="提交" />
  <!-- 图形化 submit 按钮，表现和 type="submit" 一致 -->
  <input type="image" src="./vue.svg" />
</form>

3，button 提交

MDN - button，button 的 type默认为 submit

<form>
  <button>提交</button>
</form>

阻止提交

提交 form 表单，实际上执行的是 form.submit 事件，所以阻止该事件即可。

前2种方法，对3种提交方式都有效，因为是针对 form 的。

方法1—— return false

<form onsubmit="return false;">
  <input type="text" />
</form>

也可以在事件函数中，进行表单验证：

<form onsubmit="return validateForm();">
  <input type="text">
</form>

<script>
function validateForm() {
      
      
  if (/* 验证通过 */) {
      
      
    return true; // 允许表单提交
  } else {
      
      
    return false; // 阻止表单提交
  }
}
</script>

方法2 —— 阻止 submit 的默认行为

<form id="myForm">
  <input type="text">
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
      
      
  // 阻止默认的表单提交行为
  event.preventDefault();
  
  // 在这里可以编写表单验证逻辑
  if (/* 验证通过 */) {
      
      
    this.submit(); // 手动触发表单提交
  }
});
</script>

在 vue 的事件处理中，就是使用的这个方法。

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

方法3 —— 针对 button 的处理

当通过 button 提交时，因为button.type = "submit" 才导致了直接提交表单。所以修改 type 即可。

<form id="myForm">
  <input type="text" name="inputField">
  <button type="button" onclick="validateAndSubmit()">提交</button>
</form>

<script>
function validateAndSubmit() {
      
      
  // 在这里编写表单验证逻辑
  if (/* 验证通过 */) {
      
      
    document.getElementById("myForm").submit(); // 手动触发表单提交
  }
}
</script>

---

以上。