在前端表单开发中，限制用户输入指定范围的数字是常见需求，比如年龄、数量、评分等字段都有明确的数值范围要求。HTML的pattern属性可以通过正则表达式对输入内容进行校验，是实现数字范围限制的有效方式之一。
pattern属性基本说明
pattern是HTML5为<input>标签新增的属性，其值是一个正则表达式，当用户提交表单时，浏览器会自动校验输入内容是否匹配该正则表达式，若不匹配则会阻止表单提交并提示用户。
需要注意的是，pattern属性仅在<input>的type为text、search、tel、url、email时生效，type为number时pattern不会生效，因此限制数字范围时通常搭配type="text"使用。
常用数字范围的正则规则
不同的数字范围需要对应不同的正则表达式，以下是几种常见场景的正则写法：
- 限制输入1-120的整数：
^([1-9]|[1-9][0-9]|1[01][0-9]|120)$ - 限制输入0-100的整数：
^(0|[1-9][0-9]?|100)$ - 限制输入1-5的整数：
^[1-5]$ - 限制输入带一位小数的0-10的数：
^(0|[1-9](\.\d)?|10(\.0)?)$
实际使用示例
下面以限制年龄输入为1-120为例，展示完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>pattern限制数字范围示例</title>
<style>
.error-tip {
color: #ff4444;
font-size: 12px;
display: none;
}
input:invalid + .error-tip {
display: block;
}
</style>
</head>
<body>
<form id="ageForm">
<label for="age">请输入年龄（1-120）：</label>
<input
type="text"
id="age"
name="age"
required
pattern="^([1-9]|[1-9][0-9]|1[01][0-9]|120)$"
title="请输入1到120之间的整数"
>
<span class="error-tip">请输入1到120之间的整数</span>
<button type="submit">提交</button>
</form>
</body>
</html>代码中required属性确保输入框不能为空，pattern定义1-120的整数校验规则，title属性会在用户鼠标悬停或校验失败时显示提示信息，搭配CSS的:invalid伪类可以在输入不符合规则时显示错误提示。
使用注意事项
pattern属性仅在前端做基础校验，无法替代后端校验，提交到服务端后仍需再次验证输入内容，避免恶意绕过前端校验的情况。
另外，正则规则只匹配输入的内容，不会自动修正输入，比如用户输入121，浏览器只会提示不符合规则，不会自动改为120，如果需要自动修正逻辑，需要额外搭配JavaScript实现。
正则规则解析
以1-120的正则^([1-9]|[1-9][0-9]|1[01][0-9]|120)$为例，各个部分的作用如下：
| 正则片段 | 匹配内容 |
|---|---|
| [1-9] | 1-9的一位数 |
| [1-9][0-9] | 10-99的两位数 |
| 1[01][0-9] | 100-119的三位数 |
| 120 | 数值120 |
| ^和$ | 限定匹配整个输入内容，避免部分匹配 |
掌握正则的拆分逻辑后，就可以根据实际的数字范围需求，灵活调整正则规则，实现各类数字范围的限制。