时间戳

首页 > 解决方案 > Javascript - 电子邮件验证不起作用

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

问题描述

我有以下 HTML 脚本，其中包含 CSS 和 Javascript。我有一个简单的 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>

标签： javascripthtmlcss

解决方案

提交按钮没有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>

推荐阅读