表单验证仅首个if语句执行，其余语句被跳过问题咨询

问题描述 #

我正在实现基础表单验证功能，要求点击提交按钮时确保3个字段均已输入内容，但目前仅第一个if语句会执行，其余两个会被跳过。调整if语句顺序后，依旧只有首个语句执行。我知道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;
    }
});

问题根源 #

1. return false提前终止函数：每个if判断里的return false会直接结束validateForm函数执行，只要第一个不通过的字段出现，后续验证逻辑就被跳过了。
2. 空值判断逻辑错误：length == ""是把数字类型的长度值和空字符串比较，逻辑不成立，应该直接判断字段值是否为空，或者判断长度是否为0。
3. 全局变量风险：Date_Issue_BeganError等变量未在函数内声明，属于全局变量，不仅容易引发意外覆盖，初始值也未定义。
4. 验证结果未传递：validateForm没有返回任何结果，提交事件依赖全局变量判断状态，逻辑不严谨。

修复后的代码 #

function validateForm() {
    // 初始化所有字段的错误状态为通过（true）
    let Date_Issue_BeganError = true;
    let Date_Issue_EndedError = true;
    let ResolutionError = true;

    // 先隐藏所有错误提示，避免重复显示
    $("#vld_Date_Issue_Began, #vld_Date_Issue_Ended, #vld_Resolution").hide();

    // 获取字段值并去除首尾空格，避免空格被误判为有效内容
    let Date_Issue_Began_Value = $("#MainContent_txtDate_Issue_Began").val().trim();
    let Date_Issue_Ended_Value = $("#MainContent_txtDate_Issue_Ended").val().trim();
    let Resolution_Value = $("#MainContent_txtResolution").val().trim();

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

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

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

    // 返回完整的验证结果，让提交事件直接使用
    return {
        isAllPass: Date_Issue_BeganError && Date_Issue_EndedError && ResolutionError,
        Date_Issue_BeganError,
        Date_Issue_EndedError,
        ResolutionError
    };
}           

// 提交按钮事件
$("#MainContent_btnSubmit").click(function () {
    const result = validateForm();                 
    // 根据验证结果决定是否提交表单
    return result.isAllPass;
});

修复说明 #

• 移除了每个if里的return false，确保所有字段的验证逻辑都能执行完毕，一次性显示所有未填写字段的提示。
• 修正空值判断：用=== ""直接判断处理后的字段值，同时加上.trim()过滤用户输入的无效空格。
• 在函数内部声明错误状态变量，初始化默认值为true（通过验证），避免全局变量污染。
• 验证前先隐藏所有错误提示，防止多次点击提交时提示重复显示。
• 让validateForm返回包含验证结果的对象，提交事件直接读取这个结果，逻辑更清晰严谨。

内容的提问来源于stack exchange，提问作者evanburen