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;替换随机布尔变量，你也应该trim()这些值，否则带空格的空输入将与空的情况不匹配。

jsFiddle here

Answer 2

根据@ null的答案，但即使存在有效的电子邮件地址但没有姓/名，也要停止提交表单：

document.getElementById("practiseForm").onsubmit = function() {
    var allowsubmit = true;
  if(document.getElementById("fname").value.trim() === ""){
    alert("First Name Field Cannot Be Blank");
    allowsubmit = false;
  }
  if(document.getElementById("lname").value.trim() === ""){
    alert("Last Name Field Cannot Be Blank");
    allowsubmit = 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;
  }
    if(!allowsubmit){
        return false;
    }
}

对于名为＆＃34; allowsubmit＆＃34;的变种，没有魔力。您必须检查并返回false（或event.PreventDefault（））以防止提交。另一个解决方案可能是直接返回false而不是设置allowsubmit = false - 但是只会将第一个错误通知给用户。

JS fiddle

表单验证未经验证

2 个答案: