如何将数字输入框限制为两个数值范围？

原生HTML的<input type="number">仅支持设置单一的min和max区间，无法直接实现两个不连续范围的输入限制。要让输入框同时接受0.25_5或15300的数值，需要结合JavaScript做自定义验证。

修改后的HTML代码 #

保留基础属性，添加ID方便JS获取元素：

<input class="form-control square" min="0.25" step="0.01" type="number" name="hashtag" id="dualRangeInput">

JavaScript验证逻辑 #

实时输入验证 #

监听输入事件，实时校验输入值并给出提示：

const input = document.getElementById('dualRangeInput');

input.addEventListener('input', function() {
  const inputValue = parseFloat(this.value);
  // 判断是否在允许的两个范围内
  const isValueValid = (inputValue >= 0.25 && inputValue <= 5) || (inputValue >= 15 && inputValue <= 300);

  // 设置自定义验证提示
  if (!isValueValid && this.value.trim() !== '') {
    this.setCustomValidity('请输入0.25~5或15~300之间的数值');
  } else {
    this.setCustomValidity('');
  }
});

表单提交验证（可选） #

如果输入框在表单内，建议在提交时再次校验，避免绕过实时验证的情况：

const form = document.querySelector('form');
if (form) {
  form.addEventListener('submit', function(e) {
    const inputValue = parseFloat(input.value);
    const isValueValid = (inputValue >= 0.25 && inputValue <= 5) || (inputValue >= 15 && inputValue <= 300);

    if (!isValueValid && input.value.trim() !== '') {
      e.preventDefault();
      alert('请输入0.25~5或15~300之间的数值');
    }
  });
}

样式优化（可选） #

可以通过CSS给非法输入的框添加视觉提示：

input:invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

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