仅运行第一个 If 语句

小能豆

仅运行第一个 If 语句

javascript

我正在尝试进行一些基本的表单验证，以确保在单击提交按钮时输入这 3 个字段的值，但只有第一个 if {} 语句运行并跳过其他两个。如果我重新排序 if 语句，则再次只有第一个语句运行。我知道 javascript 将退出 if/else 语句的第一个 true 条件，但我认为单独的 if 语句都会运行。$(“#vld_xxx”).show() 只是使 div 可见，以向用户显示哪些字段缺少值。

         function validateForm() {
             let Date_Issue_Began_Value = $("#MainContent_txtDate_Issue_Began").val();
             let Date_Issue_Ended_Value = $("#MainContent_txtDate_Issue_Ended").val();
             let Resolution_Value = $("#MainContent_txtResolution").val();                 

             if (Date_Issue_Began_Value.length == "") {
                 $("#vld_Date_Issue_Began").show();
                 Date_Issue_BeganError = false;
                 return false;
             }

             if (Date_Issue_Ended_Value.length == "") {                     
                 $("#vld_Date_Issue_Ended").show();
                 Date_Issue_EndedError = false;
                 return false;
             }                 

             if (Resolution_Value.length == "") {
                 $("#vld_Resolution").show();
                 ResolutionError = false;
                 return false;
             }                             
         }           


         // Submit button
         $("#MainContent_btnSubmit").click(function () {
             //alert('click');
             validateForm();                 
             if (
                 Date_Issue_BeganError == true &&
                 Date_Issue_EndedError == true &&
                 ResolutionError == true                      
             ) {
                 return true;
             } else {
                 return false;
             }
         });

阅读 108

2024-02-28

共1个答案

小能豆

问题在于您在 validateForm() 函数中的每个条件后面都使用了 return false;。当第一个条件满足时，它将返回 false 并退出函数，导致后续的条件不会被执行。您可以尝试修改您的 validateForm() 函数，使其在所有条件被检查后再返回 false，如下所示：

function validateForm() {
    let Date_Issue_Began_Value = $("#MainContent_txtDate_Issue_Began").val();
    let Date_Issue_Ended_Value = $("#MainContent_txtDate_Issue_Ended").val();
    let Resolution_Value = $("#MainContent_txtResolution").val();                 

    if (Date_Issue_Began_Value.length == "") {
        $("#vld_Date_Issue_Began").show();
        Date_Issue_BeganError = false;
    }

    if (Date_Issue_Ended_Value.length == "") {                     
        $("#vld_Date_Issue_Ended").show();
        Date_Issue_EndedError = false;
    }                 

    if (Resolution_Value.length == "") {
        $("#vld_Resolution").show();
        ResolutionError = false;
    }

    // 在所有条件检查之后返回 false
    if (
        Date_Issue_BeganError == false ||
        Date_Issue_EndedError == false ||
        ResolutionError == false                     
    ) {
        return false;
    }
}

然后，在提交按钮点击事件中，您可以直接调用 validateForm() 并根据其返回值来确定是否执行提交操作：

$("#MainContent_btnSubmit").click(function () {
    if (validateForm()) {
        return true; // 允许提交
    } else {
        return false; // 阻止提交
    }
});

这样，当所有字段都被验证后，validateForm() 函数会返回 true，允许提交操作。否则，它会返回 false，阻止提交。

2024-02-28