javascript - 表单验证不验证

Question

今天我想练习使用 JavaScript 构建表单并验证它。
这是我的表单代码:

<form id="practiseForm">
   <fieldset id="controls">
    <div>
      <label for="fname">First Name: </label>
       <input type="text" id="fname">
    </div>
    <div>
       <label for="lname">Last Name: </label>
       <input type="text" id="lname">
    </div>

    <div>
        <label for="email">Email: </label>
        <input id="email" type="text" size="40">
        </div>
    <div>
      <input type="submit" value="Submit">
    </div>
    </fieldset>

在Fiddle

我希望能够验证完整的表单，这意味着确保名字和姓氏字段不为空。如果是，那么我想使用 alert，最后我想确保用户输入有效的电子邮件地址。

我完成了编码，出于某种原因，每当我测试代码时，什么都没有发生，这意味着表单根本没有通过验证。所以我想我犯了某种错误，但不太确定是什么，有人可以帮助我吗？

Answer 1

你有一些语法错误 + 你的 onsubmit 出于某种原因(不是真的需要)在一个函数中 - 你应该只使用以下内容:

document.getElementById("practiseForm").onsubmit = function() {
  if(document.getElementById("fname").value.trim() === ""){
    alert("First Name Field Cannot Be Blank");
    return false;
  }
  if(document.getElementById("lname").value.trim() === ""){
    alert("Last Name Field Cannot Be Blank");
    return false;
  } 
  var email = document.getElementById('email');
  var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
  if (!emailRegEx.test(email.value)) {
    alert("Invalid Email address");
    return false;
  }
}

每次用return false;替换随机 bool 变量，你也应该trim()值，否则带空格的空输入将不匹配您的 is-empty 情况。

jsFiddle here