JavaScript实现库存数量校验误触发错误提示问题求助

• 你从<input>元素读取的value属性默认是字符串类型，直接使用>运算符比较时，会按照字符串的字典序（ASCII码顺序）判断大小，而非实际数值大小：
  例如当可用库存为15时，输入的"3"和库存的"15"比较，第一个字符'3'的ASCII码大于'1'，因此"3" > "15"的结果为true，就会误触发错误提示。

修改checkInput函数，比较前先将两个值转换为数值类型，同时补充非法输入判断、校验通过时清空错误提示的逻辑，修改后的代码如下：

function checkInput(item) {
    var t_price = document.getElementById("t_price");
    var available = document.getElementById("available");
    var price = document.getElementById("truck");
    var msg = document.getElementById("qty-msg");

    // 转换为数值类型，非法输入会转为NaN
    const inputQty = Number(item.value.trim());
    const availableQty = Number(available.value);
    const unitPrice = Number(price.value);

    // 先清空历史错误提示
    msg.innerHTML = '';

    // 仅当输入为合法正数值时执行校验
    if (!isNaN(inputQty) && inputQty > 0) {
        if (inputQty > availableQty) { 
            item.value = '';
            msg.innerHTML = `* 输入值不能超过可用库存 ${availableQty}`;
            msg.style.color = "red";
            t_price.value = '';
            return;
        }
        // 校验通过时计算总价，可选保留两位小数
        t_price.value = (unitPrice * inputQty).toFixed(2);
    } else {
        // 输入非法时清空总价
        t_price.value = '';
    }
}

可选优化 #

你可以将采购数量的输入框类型改为number，限制用户只能输入数字，降低非法输入概率：

<input type="number" min="1" id="qty" name="qty"  class="form-control"  oninput="checkInput(this);" required />

另外建议在getOption函数切换商品时，清空之前的采购数量、错误提示和总价，避免历史数据干扰校验逻辑。

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