在网页表单开发中，限制用户输入特定格式的数字组合是很常见的需求，比如只允许输入6位纯数字验证码、只允许输入以139开头的11位手机号等。HTML5提供的pattern属性可以配合正则表达式，在无需复杂JavaScript代码的情况下，实现前端的输入格式校验。
pattern属性的基本用法
pattern是HTML5为<input>标签新增的属性，它的值是一个正则表达式，浏览器会根据这个正则表达式校验用户输入的内容，如果输入不符合规则，表单提交时会被拦截，同时会提示用户修改输入。
使用pattern属性时需要注意几个要点：
- 只有部分
<input>的type类型支持该属性，比如text、search、tel、url、email等，number类型不支持pattern属性 - 正则表达式不需要写前后的斜杠，直接写表达式内容即可
- 通常会配合
title属性使用，title的内容会在验证失败时作为提示信息展示给用户
匹配特定数字组合的正则写法
要限制仅允许特定数字组合输入，核心是写好对应的正则表达式，以下是几个常见的数字组合场景的正则说明：
| 需求场景 | 正则表达式 | 说明 |
|---|---|---|
| 仅允许4位纯数字 | ^\d{4}$ | ^表示开头，$表示结尾，\d匹配数字，{4}表示恰好4位 |
| 仅允许以138开头的11位数字 | ^138\d{8}$ | 固定开头为138，后面跟8位任意数字，总共11位 |
| 仅允许输入123、456、789这三个数字组合 | ^(123|456|789)$ | |表示或，匹配括号中任意一个完整的组合 |
| 仅允许6-8位纯数字 | ^\d{6,8}$ | {6,8}表示数字位数在6到8位之间 |
实际代码示例
以下是几个不同场景的使用示例，可直接复制到项目中调整使用：
示例1：限制输入4位纯数字验证码
<form action="" method="post">
<label for="code">请输入4位验证码：</label>
<input type="text" id="code" name="code" pattern="^\d{4}$" title="请输入4位纯数字验证码" required>
<button type="submit">提交</button>
</form>示例2：限制输入特定手机号段
<form action="" method="post">
<label for="phone">请输入139开头的手机号：</label>
<input type="tel" id="phone" name="phone" pattern="^139\d{8}$" title="请输入139开头的11位手机号" required>
<button type="submit">提交</button>
</form>示例3：限制仅允许输入指定的几个数字组合
<form action="" method="post"> <label for="number">请选择输入指定编号：</label> <input type="text" id="number" name="number" pattern="^(1001|1002|1003)$" title="仅允许输入1001、1002、1003其中一个" required> <button type="submit">提交</button> </form>
使用注意事项
虽然pattern属性使用简单，但也有一些局限性需要开发者注意：
- 前端验证仅作为辅助手段，不能替代后端验证，因为用户可以绕过前端校验直接提交请求，所有输入内容必须在后端再次校验
- 不同浏览器对
pattern属性的校验提示样式不同，默认提示可能不符合项目UI要求，如需统一提示样式，还是需要配合JavaScript自定义提示 - 正则表达式的写法要注意边界符^和$，如果不加这两个符号，只要输入内容中包含符合规则的片段就会通过校验，比如不写^和$，输入12345也会匹配^\d{4}$的规则，因为其中包含4位连续数字
- 如果输入框不是必填项，空内容不会触发
pattern校验，只有用户输入了内容才会进行规则匹配
提示：如果需要对数字范围做更灵活的限制，比如仅允许输入100到200之间的数字，用pattern属性的正则实现会比较复杂，这种场景更建议使用JavaScript做校验。