JavaScript实现无提交按钮的number输入框1-100数值范围校验

原有逻辑失效原因 #

• 仅绑定change事件：该事件只在输入框失焦、值确认变更时触发，无法实时拦截手动输入的非法内容
• 原生min/max属性约束范围有限：仅对点击上下箭头、滚轮调整值、表单提交的场景生效，用户手动敲入超出范围的数值时不会触发校验，恰好无提交按钮的场景下，这层约束完全覆盖不到手动输入的情况

实现代码 #

HTML部分无需调整，保留原有结构即可：

<div class="col-md-12">
  <input type="number" id="figure" class="form-control " placeholder="Assign Class Limit" min="1" max="100" />
</div>

替换原有JavaScript逻辑即可，保留原有的default_figure变量存储逻辑：

const figure = document.getElementById("figure");
let default_figure;

// 实时输入校验：输入、粘贴、调值时立刻触发
figure.addEventListener("input", (event) => {
  const currentValue = Number(event.target.value);
  // 输入过程中的空值、非完整数字暂时不拦截，交给失焦事件兜底处理
  if (isNaN(currentValue)) return;

  if (currentValue < 1) {
    event.target.value = 1;
    default_figure = 1;
    // 此处可替换为自定义警告逻辑，比如弹出提示、输入框标红
    console.warn("输入数值不能小于1");
  } else if (currentValue > 100) {
    event.target.value = 100;
    default_figure = 100;
    console.warn("输入数值不能大于100");
  } else {
    default_figure = currentValue;
  }
});

// 失焦兜底校验：处理空值、非数字、输入半截就移开焦点的异常场景
figure.addEventListener("blur", (event) => {
  const currentValue = Number(event.target.value);
  if (isNaN(currentValue) || currentValue < 1) {
    event.target.value = 1;
    default_figure = 1;
  } else if (currentValue > 100) {
    event.target.value = 100;
    default_figure = 100;
  }
});

// 原有change事件逻辑可保留，也可删除，上述两个事件已经覆盖所有值变更场景
figure.addEventListener("change", (event) => (default_figure = Number(event.target.value)));

可选优化：增加视觉警告 #

如果需要给用户更明确的提示，可以自定义错误样式，不需要依赖原生表单提交的提示弹窗：

/* 非法值输入框样式 */
#figure.invalid {
  border-color: #dc3545;
}
/* 错误提示文字样式 */
.input-error-tip {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

在HTML输入框后面加提示标签：

<div class="col-md-12">
  <input type="number" id="figure" class="form-control " placeholder="Assign Class Limit" min="1" max="100" />
  <div class="input-error-tip">请输入1-100之间的数值</div>
</div>

在JS判断到非法值的时候，给输入框加invalid类、显示提示文字，值合法时移除即可。

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