指定哪個欄位驗證失敗

我正在使用 If 陳述句來驗證輸入欄位是否符合某些條件。在驗證失敗的情況下，將出現警報并且輸入邊框變為紅色。

如何確保只有驗證失敗的輸入欄位變為紅色？我考慮將它們分成 If 和 Else，但是，在兩者都失敗的情況下，這顯然會做一個或另一個。這使我相信 If 在這里不是最適合的，或者可能有一種方法可以在第一個 If 塊內指定。

！if ( document.getElementById("name").value.length > "30" || document.getElementById("commentText").value.length > "100" ) { document.getElementById("name").style.border = "2px 純紅色"; alert("名稱必須少于 30 個字符"); e.preventDefault(); } 別的 {....

我更新了如下代碼，但是，第一個檢查兩個欄位是否無效的 if 陳述句沒有被執行……我不知道為什么？

更新代碼：

if (
    document.getElementById("name").value.length > 30 &&
    document.getElementById("commentText").value.length > 100
  ) {
    document.getElementById("name").style.border = "2px solid red";
    document.getElementById("commentName").style.border = "2px solid red";
    alert(
      "Name must have fewer than 30 characters, and comment fewer than 100 characters"
    );
    event.preventDefault();
    // document.getElementById("form").reset()
  } else if (document.getElementById("name").value.length > 30) {
    document.getElementById("name").style.border = "2px solid red";
    alert("Name must have fewer than 30 characters");
    event.preventDefault();
  } else if (document.getElementById("commentText").value.length > 100) {
    document.getElementById("commentText").style.border = "2px solid red";
    alert("Comment must have fewer than 100 characters");
    event.preventDefault();
  } else {....

uj5u.com熱心網友回復：

為什么不是兩個單獨的if塊？例如：

let isValid = true;
let errors = "";

if (document.getElementById("name").value.length > 30) {
  isValid = false;
  document.getElementById("name").style.border = "2px solid red";
  errors  = "Name must have fewer than 30 characters. ";
}
if (document.getElementById("commentText").value.length > 100) {
  isValid = false;
  document.getElementById("commentText").style.border = "2px solid red";
  errors  = "Comment must have fewer than 100 characters. ";
}

if (!isValid) {
  e.preventDefault();
  alert(errors);
} else {
  //...
}

基本上檢查每個欄位并建立驗證錯誤，然后在這些檢查結束時回應整體失敗的驗證。

uj5u.com熱心網友回復：

回傳的資料型別.length不是. 還要更改比較符號。numberstring

if (
    document.getElementById("name").value.length < 30 ||
    document.getElementById("commentText").value.length < 100
  ) {
    document.getElementById("name").style.border = "2px solid red";
    alert("Name must have fewer than 30 characters");
    e.preventDefault();
  }
else{
   //your stuff goes here
}

uj5u.com熱心網友回復：

如果commentText id 有另一個if 欄位

if (
    document.getElementById("name").value.length > 30
  ) {
    document.getElementById("name").style.border = "2px solid red";
    alert("Name must have fewer than 30 characters");
    e.preventDefault();
  } 
if (
    document.getElementById("commentText").value.length > 100
  ) {
    document.getElementById("commentText").style.border = "2px solid red";
    alert("Comment must have fewer than 100 characters");
    e.preventDefault();
  }else {....

標籤：javascript 验证 if 语句

上一篇：存盤在狀態中的日期未正確更新/呈現

下一篇：如何增加chart.js圖例中的字體大小？