JavaScript函数通过条件语句实现用户输入验证的异常问题排查

根因说明 #

• 空输入校验逻辑完全失效：你对用户输入先执行了parseInt转换，空字符串经过parseInt处理后返回的是NaN，不会保留原始空字符串值，因此判断条件里pledgedAmountInput == ''永远为false。同时你判断NaN的写法错误，pledgedAmountInput == isNaN是将输入值和isNaN函数本身做等值对比，永远返回false，导致空输入、非法数字输入的校验分支永远不会触发。
• 最小金额比较存在隐式类型转换风险：你从input的min属性获取的minimumPledgeRequired是字符串类型，直接和数字类型的输入值做大小比较，可能出现预期外的转换结果。

修复后代码 #

const submitBtns = document.getElementsByClassName("pledge-submit-btn");
for (let i = 0; i < submitBtns.length; i++) {
  submitBtns[i].addEventListener("click", (e) => {
    let currentAmount = parseInt(document.querySelector("#second-main-section-backers").innerHTML.replace(/\$|,/g, ''));
    const target = 100000;
    // 先获取输入框元素，避免重复查询DOM
    const inputEl = e.target.previousElementSibling.firstElementChild;
    // 先取原始输入值做非空判断
    const rawInput = inputEl.value.trim();
    if (!rawInput) {
      alert("请输入 pledge 金额");
      return;
    }
    // 转换为数字时指定基数10，避免八进制解析异常
    const pledgedAmountInput = parseInt(rawInput, 10);
    if (isNaN(pledgedAmountInput)) {
      alert("请输入合法的数字金额");
      return;
    }
    // 将min属性转为数字后再比较
    const minimumPledgeRequired = Number(inputEl.min);
    if (pledgedAmountInput < minimumPledgeRequired) {
      alert("最低 pledge 金额为 $" + minimumPledgeRequired);
      return;
    } 
    // 后续业务逻辑不变
    let newAmount = pledgedAmountInput + currentAmount;
    document.querySelector("#second-main-section-backers").innerHTML = "$" + formatter.format(newAmount);
    localStorage.setItem("amountRaised", newAmount)
    let newProgressBarWidth = Math.round((newAmount / target) * 100);
    progressBar.style.width = newProgressBarWidth + "%";
    localStorage.setItem('progressBarWidth', newProgressBarWidth);
    let currentBackers = parseInt(document.querySelector("#total-backers").innerHTML.replace(/,/g, ''));
    currentBackers++;
    document.querySelector("#total-backers").innerHTML = formatter.format(currentBackers);
    localStorage.setItem('TotalBackers', currentBackers);
    let stockLeft = e.target.parentElement;
    stockLeftAmount = parseInt(stockLeft.parentElement.previousElementSibling.firstElementChild.innerHTML);
    stockLeftElement = stockLeft.parentElement.previousElementSibling.firstElementChild
    stockLeftAmount--;
    stockLeftElement.innerHTML = stockLeftAmount;
    pledgeSuccessModal.style.display = 'flex';
    modal.style.display = "none";
  })
}

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