JavaScript小费计算器表单无效输入错误提示异常问题排查

问题1：账单输入框清空后仍展示错误提示 #

根因是当前isValid校验逻辑存在两处缺陷：

• 空字符串转换为Number类型后值为0，布尔判断为false，会被识别为无效输入
• 合法的0值（比如账单金额为0、小费比例为0）也会被误判为无效输入

修复代码：替换原有isValid函数 #

isValid = function(value) {
  // 空输入视为合法，不触发错误
  if (value.trim() === '') return true;
  // 校验是否为有效数字，兼容0值场景
  const num = Number(value);
  return !isNaN(num) && isFinite(num);
},

问题2：小费输入框输入无效内容不触发错误提示 #

根因是小费输入框的取值逻辑做了兜底处理：tipAmt = tip.value || tip.placeholder，当用户输入非数字内容时，type="number"输入框的value会返回空字符串，此时会自动用占位符的15作为输入值，相当于把无效输入替换成了合法值，自然不会触发校验报错。

修复代码：替换原有小费输入框的监听逻辑 #

调整为先做校验，校验通过后再执行兜底占位符、计算的逻辑：

tip.addEventListener("input", 
 function() {
  error.classList.add("hidden");
  const rawTip = tip.value;
  // 先用原始输入做校验
  if (!tipCalculator.isValid(rawTip)) {
    error.classList.remove("hidden");
    return;
  }
  // 校验通过后再用占位符兜底空值用于计算
  tipAmt = rawTip || tip.placeholder;
  tipCalculator.setTip(tipAmt);
  tipCalculator.calculate(tipAmountOutput, totalOutput);
});

附加兼容修复（可选，建议修改） #

当前warningMessage函数调用了attachNodeVal设置错误文本，但attachNodeVal内部会调用valToCurrency将输入值格式化为美元货币格式，传入字符串类型的错误信息会导致转换异常，建议修改为直接设置文本内容：

warningMessage = function(element, 
  message = "Error! Please enter a numeric value") {
    element.textContent = message;
    return element;
}

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