HTML表单中pattern属性用于验证输入格式，支持text、email、password等类型，通过正则表达式约束输入内容，如限制数字、手机号、用户名、密码等格式，需配合title提示用户，且仅作前端校验，后端仍需验证。
HTML表单中的 pattern 属性用于规定输入元素的值必须匹配的正则表达式，常用于在提交表单前对文本类输入内容进行格式验证。这个属性适用于 input 元素的类型如：text、email、password、tel、search 等。
pattern 属性的基本语法
在 input 标签中添加 pattern 属性，其值为一个 JavaScript 正则表达式（不带斜杠 /）：<input type="text" pattern="[A-Za-z]{3}" title="请输入三个字母">
常见使用场景与正则表达式示例
以下是几种常见的输入验证需求及其对应的 pattern 设置方式：
-
只允许数字（例如：电话号码或邮编）
<input type="text" pattern="\d+" title="请输入数字">
\d 表示数字，+ 表示至少一位。 -
固定位数的数字（如 6 位邮政编码）
<input type="text" pattern="\d{6}" title="请输入6位邮政编码"> -
手机号码验证（中国大陆 1 开头的 11 位号码）
<input type="tel" pattern="1[0-9]{10}" title="请输入有效的手机号码"> -
用户名：字母开头，包含字母、数字、下划线，长度 4-16 位
<input type="text" pattern="[a-zA-Z][a-zA-Z0-9_]{3,15}" title="用户名必须以字母开头，4-16位字母、数字或下划线"> -
密码强度：至少8位，包含字母和数字
<input type="password" pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}" title="密码至少8位，包含字母和数字">
注意：HTML 的 pattern 不支持所有高级正则特性（如零宽断言），部分复杂逻辑需用 JavaScript 验证。 -
邮箱格式（简化版）
虽然有 email 类型自带验证，但也可自定义：<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="请输入有效的邮箱地址">
注意事项与最佳实践
- pattern 不支持完整正则语法：HTML pattern 使用的是基于 RegExp 的子集，像 ^ 和 $ 在大多数情况下是隐式添加的 —— 浏览器会自动要求整个字符串完全匹配该模式，因此一般不需要手动加首尾锚点。
- 配合 title 提供提示：当 pattern 验证失败时，浏览器会显示默认错误消息，加上 title 可让用户更清楚正确格式。
- 仅做前端初步校验：pattern 是用户体验优化手段，不能替代后端验证。恶意用户可绕过前端，所以服务端仍需做数据校验。
- 某些 input 类型才有效：pattern 对 type="number" 无效（因其有 min/max/step 控制），应使用 text、tel、password 等类型配合 pattern。
基本上就这些。合理使用 pattern 能提升表单填写体验，减少简单错误。关键是写出准确的正则，并给出清晰提示。不复杂但容易忽略细节。
