先记住这个答案
数字输入框会把不同的约束失败记录在 input.validity 上。低于 min 是 rangeUnderflow,高于 max 是 rangeOverflow,不落在 step 允许的序列上是 stepMismatch。提交时,浏览器先运行交互式约束校验;有无效控件就阻止提交,并对需要提示的控件显示浏览器消息。空值如果没有 required,通常不会因这些数值约束失败。
- 低于
min是rangeUnderflow - 高于
max是rangeOverflow - 不合
step是stepMismatch - 空值是否报错取决于
required
步进是从基准开始数
假设价格从 1 元起,每次增加 2 元,合法值是 1、3、5,而不是所有偶数。step 的计算需要一个基准:通常先看 min,没有时再看值属性或默认基准。只写“能被 2 整除”会把这个例子判断反。
<label>价格
<input name="price" type="number" min="1" max="9" step="2" required>
</label>
<button type="submit">保存</button>输入 2 时落在上下限内,却不符合步进,stepMismatch 为真;输入 11 则超过上限。代码里还设置了 required,所以留空时会出现 valueMissing。
浏览器原生提示文案会随语言和实现变化,不应在业务代码里硬匹配具体提示文字。需要分辨错误原因时,读取 validity 各布尔属性。
提交与主动检查
用户点击提交按钮或调用 requestSubmit() 时,会进行表单约束校验;无效控件使提交停止。代码也可以调用 checkValidity() 获取布尔结果,或用 reportValidity() 触发交互式提示。
input.validity.valid 表示约束整体是否通过。一个输入可能同时有多个约束属性,但设计错误提示时应给用户最可操作的修正建议,例如“请输入 1 到 9 之间、间隔为 2 的数字”。服务端仍须重新校验,因为前端约束可被绕过。
这几个错误标志可以同时为真,不是互斥的选项。在上面的 min="1" max="9" step="2" 示例里,输入 12 既高于上限,又偏离 1、3、5、7、9 这条步进序列,rangeOverflow 和 stepMismatch 都可能为真。若 UI 只展示一条提示,应先告诉用户最容易修正的问题,而不是把浏览器提示文本当作固定错误码解析。金额等需要精确小数的业务,服务端还要用明确的十进制规则重新验证。
容易答错的地方
- 只看
rangeOverflow就判断输入合法 - 范围内的值还可能不合
step,或者根本不是可解析数字。应看整体valid,需要精确反馈再看各标志。 - 认为
step="2"一定只收偶数 - 步进基准会影响允许序列。
min="1"时,步长 2 对应 1、3、5 等奇数。
面试官还会怎么问?
step="any" 会怎样?
它不再用步进间隔限制数值,但 min、max 和其他约束仍可生效。
不填值会触发 rangeUnderflow 吗?
一般不会。空值是否不合法取决于 required;数值范围不等于必填。
程序里怎么读取具体原因?
读取控件的 validity.rangeUnderflow、rangeOverflow、stepMismatch 等属性,避免解析浏览器提示字符串。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。