Javascript 表单验证不是验证

今天我想练习构建表单并使用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>

名字：
姓氏：
电邮：

在

我希望能够验证完整的表单，这意味着确保名字和姓氏字段不为空。如果是，那么我希望使用

警报

，最后我希望确保用户输入有效的电子邮件地址

---

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

由于某种原因（不是真的需要），函数中出现了一些语法错误+您的

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;
  }
}

将随机布尔变量替换为

返回false每次，您也应该输入这些值，否则带空格的空输入将与您的is-empty案例不匹配

基于@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;
    }
}   

一个叫做“allowsubmit”的变量没有魔力。您必须检查并返回false（或event.PreventDefault（））以防止提交。另一种解决方案可能是直接返回false，而不是设置allowsubmit=false，但是只有第一个错误才会通知用户

请在问题中添加javascript代码，而不仅仅是在小提琴中。问题应该是可读的，不依赖外部站点。您需要将“验证”功能绑定到表单的提交。@Hatsjoem，谢谢您提供的提示。如果您输入了有效的电子邮件地址，但没有名字/姓氏，则会收到通知，但表单仍会提交。如果您想防止出现这种情况，请参阅下面的我的答案。@null，如果您愿意，您也可以检查它==>