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