JavaScript请假天数校验函数重复弹窗问题排查求助

问题描述 #

我有一段JavaScript代码，原本运行正常，但修改结束日期调整小时数后，会持续重复弹出相同的提示框。调试后问题依旧。

场景说明：当data-maxed为11.00、data-cap为Y时，申请天数为8则校验通过，超过11则触发提示框。但一旦触发提示框后，即使修改结束日期使申请天数变为5，仍会连续弹出相同提示框，无法退出该环节。

原代码 #

var getMaxApplied = $("##mainform1").find('option:selected').attr('data-maxed');
var capLimit = $("##mainform1").find('option:selected').attr('data-cap');
var appliedLeaves = $("##mainform1").find("##TotalDays_id").val();
alert(appliedLeaves);
alert(getMaxApplied);
alert(capLimit);
if(getMaxApplied != 0.00 && (appliedLeaves < getMaxApplied && capLimit == "N")) {
    ok = true; 
}
if(getMaxApplied != 0.00 && (appliedLeaves > getMaxApplied && capLimit == "Y")) {
    alert('The requested leaves are greather than the cap limit.');
    ok = false; 
}
return ok;
}

问题根源 #

1. 字符串与数值的类型不匹配
   从DOM获取的getMaxApplied和appliedLeaves都是字符串类型，直接用</>比较时会按字符串字典序判断，而非数值大小。比如字符串"5"和"11.00"比较时，"5"会被判定为大于"11.00"（首字符ASCII码'5' > '1'），导致即使申请天数改为5，仍会触发超过限额的判断。

2. 变量ok未初始化
   代码中没有初始化ok变量，第一次运行时ok为undefined，后续如果未进入任何if分支，ok会保持之前的false状态，导致逻辑持续判定不通过。

3. ID选择器语法错误
   代码中使用$("##mainform1")和find("##TotalDays_id")，多了一个#，正确的ID选择器应为$("#mainform1")和find("#TotalDays_id")，错误的选择器会导致无法获取DOM元素，变量值为undefined，进一步引发判断逻辑混乱。

4. 多if分支的逻辑漏洞
   两个独立的if分支可能同时触发或遗漏情况，没有覆盖所有合法场景的默认处理。

修复后的代码 #

// 修正选择器，获取值后转为数值类型，处理可能的NaN
var getMaxApplied = parseFloat($("#mainform1").find('option:selected').attr('data-maxed')) || 0;
var capLimit = $("#mainform1").find('option:selected').attr('data-cap');
var appliedLeaves = parseFloat($("#mainform1").find("#TotalDays_id").val()) || 0;

// 初始化ok变量，默认设为合法状态（可根据业务调整）
var ok = true;

if(getMaxApplied !== 0 && (appliedLeaves > getMaxApplied && capLimit === "Y")) {
    alert('The requested leaves are greater than the cap limit.');
    ok = false; 
} else if(getMaxApplied !== 0 && (appliedLeaves < getMaxApplied && capLimit === "N")) {
    ok = true; 
}

return ok;

修复说明 #

• 将获取到的字符串通过parseFloat转为数值类型，并用|| 0处理转换失败的NaN情况，确保数值比较的正确性。
• 初始化ok变量为默认合法状态，避免未定义导致的逻辑异常。
• 修正ID选择器的语法错误，确保能正确获取DOM元素的值。
• 改用else if结构，优化逻辑分支，避免重复判断或遗漏场景。

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