在Web表单开发中，输入验证是保障数据准确性的重要环节。HTML5提供的pattern属性可以通过正则表达式完成前端原生输入校验，不需要额外编写JavaScript代码就能实现不少复杂规则。当我们需要验证输入的数字既要落在指定范围，又要属于某个特定值集合时，就可以通过正则规则的组合来实现。
pattern属性的基础用法
pattern是HTML输入框<input>的属性，其值是一个正则表达式，浏览器会自动校验输入内容是否匹配该正则。需要注意的是，pattern正则默认是匹配整个输入字符串，不需要额外添加^和$边界符，而且校验时不会自动忽略首尾空格，实际使用时可以根据需求处理。
基础使用示例：限制输入只能是3到6位的数字，代码如下：
<form>
<label>请输入3-6位数字：</label>
<input type="text" pattern="\d{3,6}" title="请输入3到6位的数字">
<button type="submit">提交</button>
</form>数字范围验证的正则实现
如果要验证数字在某个范围内，比如1到100，直接写范围正则会比写{1,100}更准确，因为{1,100}会匹配1到100位的数字，不符合需求。我们可以用分段匹配的思路来写正则：
- 1-9：匹配1到9的个位数，正则为
[1-9] - 10-99：匹配10到99的两位数，正则为
[1-9]\d - 100：匹配三位数100，正则为
100
组合起来就是([1-9]|[1-9]\d|100)，就可以匹配1到100的所有整数。
特定值组合的验证规则
如果除了数字范围，还需要输入值属于特定集合，比如要求输入的数字只能是1到100之间的偶数，或者只能是10、20、30、50、80这几个值，就可以在原有范围正则的基础上增加条件。
以验证输入值只能是10、20、30、50、80为例，这几个值都在1到100的范围内，我们可以直接写对应的正则：
<form> <label>请输入允许的特定值（10、20、30、50、80）：</label> <input type="text" pattern="10|20|30|50|80" title="请输入10、20、30、50或80"> <button type="submit">提交</button> </form>
组合数字范围和特定值的完整示例
假设我们的需求是：输入的数字必须是10到200之间的整数，并且只能是10的倍数，也就是10、20、30...200。这时候我们可以先写10到200的范围正则，再增加10的倍数的条件。
10到200的范围正则拆分：
- 10-99：两位数且是10的倍数，正则为
[1-9]0 - 100-200：三位数且是10的倍数，正则为
1\d0|200
组合起来就是([1-9]0|1\d0|200)，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>pattern组合验证示例</title>
</head>
<body>
<form id="testForm">
<p>
<label for="numInput">请输入10-200之间的10的倍数：</label>
<input type="text" id="numInput" pattern="([1-9]0|1\d0|200)" title="请输入10、20...200之间的10的倍数" required>
</p>
<button type="submit">提交</button>
</form>
</body>
</html>注意事项
使用pattern属性做验证时，有几点需要注意：
- pattern只支持文本输入框
type="text"，对于type="number"的输入框，pattern属性不会生效，需要改用text类型再配合正则验证。 - 正则的匹配是区分大小写的，如果输入包含字母需要提前确定大小写规则。
- title属性会在输入不符合规则时作为提示信息展示，建议填写清晰易懂的提示内容。
- pattern只是前端验证，后端仍然需要对接收的数据做二次校验，避免恶意绕过前端规则提交非法数据。
pattern属性的正则校验是在表单提交时触发，如果需要在输入过程中实时校验，还需要配合JavaScript的oninput事件来辅助实现。
通过上述方法，我们可以灵活组合正则规则，用HTML原生pattern属性实现数字范围和特定值组合的复杂输入验证，减少前端JavaScript的校验代码量，提升表单开发的效率。
HTML_pattern输入验证数字范围验证正则匹配表单校验修改时间：2026-06-02 03:58:34