使用javascript验证表单字段

Question

伙计。

我希望你不要把这看作是一个愚蠢的问题，因为我是JavaScript新手。我对如何解决这个问题做了我的研究，但是我发现堆栈溢出的答案现在对我来说太高了。而且我也不喜欢复制代码。我想学习它。我的JavaScript代码在一个领域工作，但即使在我做了一个循环时，也不适用于所有领域。

请你可以自由地告诉我如何做到这一点专业。我会很高兴看到许多方法或方法。格拉西亚斯

---

function Validate(x){ 
 
    var required = document.getElementsByClassName("required"); 
 
    for(var x = 0; x > required.length; x++){ 
 
    if ((required[x].value == "") || (required[x].value == null)) { 
 
     required[x].style.backgroundColor = "red"; 
 
     required[x].style.color = "white"; 
 
    } else { 
 
     required[x].style.backgroundColor = ""; 
 
     required[x].style.color = "#777"; 
 
     } 
 
    } 
 
}

<form id="form1" name="form1" method="post" action=""> 
 
<p> 
 
<label for="textfield">Name</label><br /> 
 
    <input type="text" name="name" id="name" class="forme required" onblur="Validate(name)" /> 
 
    <br /> 
 

 
    <label for="textfield">Surname</label><br /> 
 
    <input type="text" name="surname" id="surname" class="forme required" /> 
 
    <br /> 
 

 
    <label for="textfield"> School</label><br /> 
 
    <input type="text" name="school" id="school" class="forme required" /> 
 
    <br /> 
 

 
    <label for="textfield">Mobile</label><br /> 
 
    <input type="text" name="mobile" id="mobile" class="forme required" /> 
 
    <br /> 
 

 
    <label for="email"> Email</label><br /> 
 
    <input type="text" name="email" id="email" class="forme required"/> 
 
    </p> 
 
    <p> 
 
    <input type="reset" name="reset" id="reset" value="Reset" /> 
 
    <input type="submit" onclick="Validate()" name="submit" id="submit" value="Submit" /> 
 
    </p> 
 
</form>

---

是雅时间感激。

Answer 1

如您在问题的评论中提到的，您使用了错误的符号（“>”ist false，“<”为true）。但是你的代码有更多的失败。

• 在label元件应当始终指向相应的输入域，所以使用输入字段的ID的for属性。

• 使用JavaScript addEventListener方法代替DHTML属性onclick可能更好，但这可能是品味的问题。

document.getElementById("submit").addEventListener("click", function(event){ 
 
    var req  = document.querySelectorAll("form input.required"), 
 
     error = false; 
 
     
 
    for(var i = 0; i < req.length; i++){ 
 
     if(req[i].value.trim() == ""){ 
 
      if(!error){ 
 
       error = true; 
 
      } 
 
      req[i].style.setProperty("color", "#ffffff"); 
 
      req[i].style.setProperty("background-color", "#ff0000"); 
 
     } else { 
 
      req[i].style.removeProperty("color"); 
 
      req[i].style.removeProperty("background-color"); 
 
     } 
 
    } 
 
    
 
    if(error){ 
 
     // Prevent Form Submit 
 
     event.preventDefault(); 
 
    } 
 
});

<form id="form1" name="form1" method="post" action=""> 
 
    <p> 
 
     <label for="name">Name</label><br /> 
 
     <input type="text" id="name" name="name" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <label for="surname">Surame</label><br /> 
 
     <input type="text" id="surname" name="surname" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <label for="school"> School</label><br /> 
 
     <input type="text" id="school" name="school" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <label for="mobile">Mobile</label><br /> 
 
     <input type="tel" id="mobile" name="mobile" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <label for="email"> Email</label><br /> 
 
     <input type="email" id="email" name="email" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <input type="reset" id="reset" name="reset" value="Reset" /> 
 
     <input type="submit" id="submit" name="submit" value="Submit" /> 
 
    </p> 
 
</form>

请注意：不要使用只有JavaScript来验证你的表单字段。您应该始终检查服务器端传递的用户信息，因为您无法控制用户。

玩得开心学习JavaScript。

此致，
Sam。