表单提交的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>

---

以上。