HTML5的pattern属性支持客户端正则校验，适用于身份证号（[0-9]{17}[0-9Xx]）、邮编（[0-9]{6}）等固定格式字段，需配合title提示，且仅作前端初筛，后端必须二次验证。
HTML5 的 pattern 属性可用于在表单提交前，对输入内容做**客户端正则校验**，适用于身份证号、邮编、手机号等有固定格式的字段。它不替代服务端验证，但能提升用户体验和基础数据质量。
身份证号匹配（18位，含X）
中国大陆身份证为18位：前17位为数字，最后一位可能是数字或字母 X（大小写均可）。正则需兼顾校验位逻辑的简化版（pattern 仅做格式初筛，不实现完整18位校验算法）：
推荐 pattern 值：[0-9]{17}[0-9Xx]
说明：
– [0-9]{17} 匹配连续17个数字
– [0-9Xx] 匹配第18位：数字或 X/x
– 注意：该正则不校验地区码、出生日期有效性或校验位（如GB 11643-1999算法），仅作格式兜底
用法示例：
<input type="text" pattern="[0-9]{17}[0-9Xx]" title="请输入正确的18位身份证号（末位可为X）">
邮政编码匹配（6位纯数字）
中国邮编严格为6位阿拉伯数字，无空格、字母或符号：
推荐 pattern 值：[0-9]{6}
说明：
– [0-9]{6} 精确匹配6个数字
– 不接受以0开头的非法邮编（如000000虽格式对，但实际不存在；但 pattern 无法判断地理有效性，此属业务逻辑）
用法示例：
<input type="text" pattern="[0-9]{6}" title="请输入6位邮政编码">
补充要点与注意事项
pattern 是 HTML5 表单约束 API 的一部分，依赖浏览器原生支持（现代主流浏览器均支持），但需配合其他属性生效：
- 必须搭配
type="text"或type="tel"等可输入类型使用；type="number"会忽略pattern（因 number 类型只接受数字，无法输入 X） - 正则默认是**全字符串匹配**，无需加
^和$（HTML5 规范已隐式添加） - 用户输入不满足 pattern 时，提交会失败，并弹出
title属性定义的提示文字（建议写清楚要求） - pattern 仅前端校验，**绝不可用于安全敏感场景**（如身份核验），后端必须重新验证
增强体验的小技巧
让 pattern 更友好、更可靠：
- 加
inputmode="numeric"（移动端唤起数字键盘） +maxlength="18"（限制长度）辅助身份证输入 - 对身份证字段，可结合
oninput小写转大写（如把 x → X），提升一致性：oninput="this.value=this.value.toUpperCase()" - 避免过度复杂正则——pattern 不支持标志位（如
i忽略大小写），所以需显式写[Xx]而非X加标志
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
