Javascript - 电子邮件验证不起作用

Question

我有以下带有 CSS 和 Javascript 的 HTML 脚本。我有一个简单的 javascript 函数，它应该验证我输入的电子邮件。但是根本不会调用 javascript 函数。有人可以帮忙吗？

function validateForm() {
  var x = document.getElementById("email").value;
  alert(x);
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}

<h1>DELIVERY DETAILS</h1>

<form id="deliveryDetails">
  First name:<br>
  <input type="text" name="firstname"><br> Last name:<br>
  <input type="text" name="lastname"><br> e-mail:
  <br>
  <input type="text" id="email"><br> telephone number:<br>
  <input type="text" name="telephone number"><br> order number:<br>
  <input type="text" name="order number"><br> order date:<br>
  <input type="text" name="order date"><br><br>
  <input type="submit" value="submit" onsumbmit="return validateForm();">

</form>

Answer 1

提交按钮没有 onsubmit 事件，表单有，将事件添加到表单，代码会执行:

function validateForm() {
  var x = document.getElementById("email").value;
  alert(x);
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}

<h1>DELIVERY DETAILS</h1>

<form id="deliveryDetails" onsubmit="return validateForm();">
  First name:<br>
  <input type="text" name="firstname"><br> Last name:<br>
  <input type="text" name="lastname"><br> e-mail:
  <br>
  <input type="text" id="email"><br> telephone number:<br>
  <input type="text" name="telephone number"><br> order number:<br>
  <input type="text" name="order number"><br> order date:<br>
  <input type="text" name="order date"><br><br>
  <input type="submit" value="submit" >
</form>