使用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。