JS 实现限制 input 框输入 0 - 100 正整数的两种途径

在网页开发中，经常会遇到需要限制用户在输入框中输入特定范围数值的情况，比如要求输入 0 到 100 的正整数。下面将介绍两种使用 JavaScript 来实现这一限制的途径。

方法一：使用正则表达式

正则表达式是一种强大的模式匹配工具，在处理输入验证时非常有用。以下是使用正则表达式来限制输入框只能输入 0 到 100 正整数的代码示例：

function validateInput(inputValue) {
  var regex = /^([1-9]\d?|100)$/;
  return regex.test(inputValue);
}

document.getElementById('myInput').addEventListener('input', function() {
  var inputValue = this.value;
  if (!validateInput(inputValue)) {
    this.value = this.value.slice(0, -1);
  }
});

在上述代码中，定义了一个 validateInput 函数，其中的正则表达式 ^([1-9]\d?|100)$ 用于匹配 1 到 99 之间的数字（包括 1 和 99）以及 100 这个值。在 input 事件的监听函数中，如果输入的值不符合要求，就将最后输入的字符删除。

方法二：通过判断数值范围

另一种实现方式是在每次输入时获取输入的值，并判断其是否在 0 到 100 之间。如果不在这个范围内，则进行相应的处理。

document.getElementById('myInput').addEventListener('input', function() {
  var inputValue = parseInt(this.value);
  if (inputValue < 0 || inputValue > 100 || isNaN(inputValue)) {
    this.value = Math.max(0, Math.min(100, parseInt(this.value)));
  }
});

在这个方法中，首先将输入的值转换为整数，然后判断是否小于 0 、大于 100 或者不是一个有效的数字。如果是这样的情况，就将输入框的值设置为 0 到 100 之间的有效值。

无论使用哪种方法，都能有效地限制用户在输入框中输入 0 到 100 的正整数，从而提高用户输入的准确性和有效性，增强网页的交互体验。根据具体的项目需求和开发场景，可以灵活选择适合的方法来实现输入限制的功能。