使用javascript檢查多個輸入值並在1個復選框上標記多個輸入框

Question

我期望以下功能將紅色邊框同時應用於ID為“ name”的輸入字段和AS ID為“ email”的輸入字段。 （當用戶將所有輸入字段留空時）

但是，該腳本僅將紅色邊框應用於ID為“ name”的輸入字段，而ID為“ email”的字段保持不變。

            function checkform() {
                if ( name() && mail() ) {
                    return true;
                } else {
                    return false;
                }
            }

            function name() {
                if (document.getElementById("name").value == "") {
                    $("#name").css("border", "1px solid red");
                    return false;
                } else { 
                    return true; 
                }
            }

            function mail() {
                if (document.getElementById("email").value == "") {
                    $("#email").css("border", "1px solid red");
                    return false;
                } else { 
                    return true; 
                }
           }

子函數“ name（）”中的return false似乎以某種方式“殺死”了整個代碼，並阻止了“ mail（）”的運行。

更新 ：如果我在第二行切換功能名稱，則只有ID為'email'的輸入字段會顯示紅色邊框（如果用戶將所有輸入字段留空）。 然后，ID為“ name”的字段保持不變。

（很抱歉同時使用javascript和jquery）

Answer 1

名稱函數中的return false語句使if條件內的語句短路。 在評估if（name（）&& mail（））時，name（）返回false，並且由於AND與false始終為false，因此該語句被短路，並且永遠不會調用mail（）函數。

Answer 2

如果if語句逐個運行條件，直到確定它們不滿足條件。 在您的情況下，如果name()為false，它將永遠不會在其后運行條件。 您可以嘗試使用以下方法：

function checkform() {
   var isValid = name();
   isValid = mail() && isValid;
   return isValid;
}

但是，我建議您編寫一個通用函數，該函數將檢查作為參數給出的某些輸入是否為空。

另外還有一個非常不錯的jQuery插件，可以幫助您完成任務： http : //jqueryvalidation.org/