javascript - 如果我的 JavaScript 函数返回 false，我该如何阻止表单操作？

Question

我对编程非常缺乏经验，如果这是一个愚蠢的问题，我很抱歉。

我正在创建一个用户可以使用按钮提交的表单。我已经使用脚本函数来决定它们是返回 true 还是 false，唯一的条件是必须填写输入框。这是我的 JavaScript 和 HTML 代码的简化版本，我只包含一个输入框。 (我的真实代码有六个)

function validateEmail() {
    var x = document.forms["myForm"]["email"].value;
    if (x == null || x == "") {
        alert("Email must be filled out");
        return false;
	}
	else {
		return true;
	}
}

<form name="myForm" 
onsubmit="validateEmail()" method="post" action="Different_Page.html">
  
<label for="email">Email Address:</label>
<input type="email" name="email">
  
<input type="submit" value="Submit">
</form>

问题是，如果用户没有输入他们的电子邮件并且函数返回 false，它仍然会转到我只希望它在返回 true 时转到的页面。所以换句话说，我希望它什么都不做并留在这个页面上，但只有当脚本返回 false 时。我该如何实现？

Answer 1

您必须从 onsubmit 函数返回 false 而不仅仅是从该函数调用的函数。

onsubmit="return validateEmail()"

---

也就是说，现代代码会避免使用固有的事件属性，转而使用 JavaScript 绑定(bind)事件处理程序......

function validateEmail(evt) {
  var x = this.elements.email.value;
  if (x == "") {
    alert("Email must be filled out");
    evt.preventDefault();
  }
}

document.getElementById('myForm').addEventListener("submit", validateEmail);

<form id="myForm" method="post" action="Different_Page.html">

  <label for="email">Email Address:</label>
  <input type="email" name="email">

  <input type="submit" value="Submit">
</form>

---

……或者完全忘记 JavaScript，只使用 HTML 5 中引入的验证功能。

<form method="post" action="Different_Page.html">

  <label for="email">Email Address:</label>
  <input type="email" name="email" required>

  <input type="submit" value="Submit">
</form>