带max属性的type=number输入框手动输入值超出上限问题咨询

问题根因 #

• 校验逻辑触发条件存在漏洞：当前updateQuantityManual方法仅在输入值不能被data-lot步长整除时才会进入修正分支，若用户输入的是步长的整数倍（如示例中步长10，输入60），会直接跳过所有校验逻辑，不会触发最大值判断。
• 缺少最大值校验逻辑：就算进入了步长修正分支，现有代码仅读取了max属性值，未将计算后的最终数量和max做比较，修正后的数值超过上限时也会直接写入输入框。
• 原生<input type="number">的max属性默认仅对浏览器自带的增减箭头生效，手动输入内容时不会自动拦截超出范围的值，必须依赖自定义校验逻辑处理。

修复后的代码示例 #

updateQuantityManual: function updateQuantityManual(_this) {
    const $input = $(_this);
    // 读取配置参数统一转数字，避免字符串比较异常
    const lot = $input.is('[data-lot]') ? parseInt($input.attr('data-lot'), 10) : 1;
    const min = parseInt($input.attr('min'), 10) || 1;
    const max = parseInt($input.attr('max'), 10) || Infinity;
    let qty = parseInt($input.val(), 10);

    // 先处理步长匹配
    if (qty % lot !== 0) {
        qty = qty + lot - (qty % lot);
    }

    // 再处理边界校验，超过上限时取小于max的最大步长整数倍值
    if (qty > max) {
        qty = Math.floor(max / lot) * lot;
    } else if (qty < min) {
        qty = min;
    }

    $input.val(qty);
},

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