如何使用jQuery判断输入变量数值范围并实现上限10000的赋值逻辑

问题原因 #

从输入框通过.val()方法获取的内容默认是字符串类型，直接和数字进行大小比较时，会触发JS隐式类型转换，若输入内容包含非数字字符、前后空格等情况，转换结果会不符合预期，最终导致判断逻辑出错。

排查步骤 #

• 执行console.log(typeof sc, sc)确认sc的类型和实际值，判断是否存在类型错误、值包含多余字符的问题
• 分别输入9999、10000、10001三个测试值，打印ssa的实际输出，定位判断逻辑的异常节点
• 检查输入内容是否存在空格、字母、符号等非数字内容，确认是否是非法输入导致的转换失败

解决方案 #

1. 修正JS逻辑，先做类型转换再判断 #

先对输入值做去空格、转数字、非法值兼容处理，再执行大小判断：

// 先去除输入内容前后空格，再转换为数字类型
var sc = Number($('#Single-num1').val().trim());
// 兼容非数字输入的场景，非法输入默认赋值为0，可根据需求调整默认值
if (isNaN(sc)) {
  sc = 0;
}
// 执行判断赋值，三元表达式写法更简洁
var ssa = sc >= 10000 ? 10000 : sc;
console.log(ssa);

2. 优化输入框限制（可选） #

把输入框的type从text改为number，从交互层面限制用户只能输入数字，降低非法输入概率：

<div class="singlewateramountdiv">
  <label for="Single-Water-Amount">How Much Water Was Used?</label>
  <input type="number" id="Single-num1" name="Single-num1" min="0"/>
</div>

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