HTML input如何通过pattern属性限制输入-99至99范围整数

之前正则失效的原因 #

你之前写的正则存在两个核心问题，导致超出范围的数值能通过校验：

• pattern="[-][0-9][0-9]{2,3}" 规则固定了负号后要跟1位数字+2_{3位数字，实际匹配的是负号加3}4位数字，自然会放行-999这类超出范围的值
• [-0-9]|[0-9]{2,3} 分支逻辑错误：第一个分支仅匹配单个负号或单个数字，第二个分支匹配2~3位纯数字，不仅会放行999这类3位数字，甚至单独输入负号也能通过校验

正确实现方式 #

方案1：正则匹配（适用于text类型输入框） #

直接给输入框添加如下pattern属性即可：

<input type="text" pattern="-?[0-9]{1,2}">

正则逻辑说明：

• -?：代表负号仅可匹配0次或1次，且写在规则最前端，保证负号只能出现在输入值的开头，不会出现在数字中间
• [0-9]{1,2}：匹配1~2位数字
• HTML的pattern属性默认会给正则添加首尾全匹配锚点，不需要手动写^和$，因此3位及以上数字、负号不在开头的输入都会被拦截

如果需要更严谨的校验，禁止输入-0、01、-09这类带前导零、无意义的-0值，可以使用更严格的正则：

<input type="text" pattern="(-[1-9][0-9]?|[1-9][0-9]?|0)">

这个规则仅会匹配三类值：-99_{-1的负整数、0、1}99的正整数，完全覆盖-99到99的整数范围，没有冗余匹配。

方案2：原生数字输入框限制（更推荐） #

如果不需要兼容特殊场景，优先使用type="number"类型的输入框，不需要写正则，仅靠原生属性就能实现范围限制，还能在移动端唤起数字输入键盘：

<input type="number" min="-99" max="99" step="1">

属性说明：

• min="-99"：限制允许输入的最小值为-99
• max="99"：限制允许输入的最大值为99
• step="1"：限制仅能输入整数，禁止小数通过校验

注意事项 #

• 上述HTML原生校验默认仅在表单提交时触发，如果需要输入过程中实时拦截非法值，需要额外绑定input事件配合JS做实时校验
• 所有前端校验都不能替代后端校验，生产环境需要在服务端再次校验入参范围

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