jQuery中.val()函数无法识别数字中的0的技术求助

嘿，我一眼就看出问题所在啦——这是个JavaScript里字符串和数字比较的经典坑！

问题根源 #

你用.val()获取到的输入框内容是字符串类型，而不是数字。当你直接用<或>比较字符串时，JS会按照字典顺序（也就是逐个字符对比ASCII码）来判断大小，而不是数值大小。举个例子：

• 字符串"30"和"100"对比时，第一个字符"3"的ASCII码比"1"大，所以JS会错误地认为"30" > "100"，这就是你输入含0的数字时功能失效的原因。

解决步骤&修正代码 #

我们只需要两步就能搞定：

1. 把所有输入值转换成数字类型，确保是在比较数值而非字符串；
2. 简化判断逻辑，避免冗余分支和遗漏场景（比如等于min/max的情况）。

修正后的代码如下：

$(document).ready(function() {
  $('#desire_point').on('change', function() {
    // 将输入值转为数字，避免字符串比较的问题
    const minVal = Number($('#min_value').val());
    const maxVal = Number($('#max_value').val());
    const desireVal = Number(this.value);

    // 只要输入值小于最小值 或者 大于最大值，就标记为无效
    if (desireVal < minVal || desireVal > maxVal) {
      $('#desire_point').addClass('is-invalid');
      $('#btnSbmt').attr('disabled', true);
    } else {
      // 其他情况（包括等于min/max）都视为合法
      $('#desire_point').removeClass('is-invalid');
      $('#btnSbmt').attr('disabled', false);
    }
  });
});

额外优化建议 #

如果想更严谨，可以处理用户未输入min或max的情况（此时Number()会返回NaN），比如加个判断：

// 先检查min和max是否有效
if (isNaN(minVal) || isNaN(maxVal)) {
  alert("请先输入有效的最小值和最大值！");
  $('#btnSbmt').attr('disabled', true);
  return;
}

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