jQuery条件显示/隐藏OTP输入框与更新按钮的逻辑问题咨询

问题根源 #

当前JS逻辑的核心缺陷是：SaveProfileName_Email函数仅判断当前触发失焦事件的单个字段是否与原值一致，没有全局检查两个字段的整体修改状态。当用户修改其中一个字段后改回原值，但另一个字段仍处于修改状态时，函数会因为当前字段匹配原值而直接隐藏控件，违反了"任意字段修改即保持显示"的需求。

修正方案 #

重构逻辑，新增全局检查函数，每次字段失焦时同时验证邮箱和姓名的修改状态，统一控制控件显示/隐藏。

修改后的JS代码 #

// 全局检查两个字段是否存在修改
function checkProfileChanges() {
    // 获取邮箱的当前值与原始值
    const emailCurrent = $("#txtProfileEmail").val().trim();
    const emailOriginal = $("#hdn_profile_email").val().trim();
    // 获取姓名的当前值与原始值
    const nameCurrent = $("#txtProfileName").val().trim();
    const nameOriginal = $("#hdn_profile_name").val().trim();
    
    // 判断任意一个字段是否与原始值不同
    const hasChanges = emailCurrent !== emailOriginal || nameCurrent !== nameOriginal;
    
    // 统一控制OTP框和保存按钮的显示状态
    if (hasChanges) {
        $("#btnProfileSave").removeClass('hidden');
        $("#txtProfileOTP").removeClass('hidden').val('');
    } else {
        $("#btnProfileSave").addClass('hidden');
        $("#txtProfileOTP").addClass('hidden').val('');
    }
}

function SaveProfileName_Email(input, type, hiddenField) {
    var saveFlag = true;
    var value = $(input).val().trim();
    var oldValue = $(hiddenField).val().trim();

    if (value === "") {
        $(input).val(oldValue);
        $(input).focus();
        saveFlag = false;
    } else if (type === 'email' && !isValidEmail(value)) {
        $(input).val(oldValue);
        $(input).focus();
        saveFlag = false;
    }

    // 字段验证完成后，调用全局检查函数更新控件状态
    checkProfileChanges();
}

function isValidEmail(email) {
    var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regex.test(email);
}

逻辑说明 #

1. 全局检查函数：checkProfileChanges会同时校验邮箱和姓名两个字段的当前值与原始值，只要任意一个字段存在修改，就判定为需要显示控件。
2. 字段验证逻辑保留：原有的空值校验、邮箱格式校验逻辑保持不变，确保输入合法性。
3. 统一状态控制：所有控件的显示/隐藏操作由全局检查函数统一处理，避免单个字段判断导致的逻辑漏洞。

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