html pattern属性只支持裸正则字面量，中国邮编应写为pattern="\d{6}"，需配合title提示和required属性，且必须用type="text"；客户端校验不可靠，后端必须二次验证。
HTML 的 pattern 属性不支持完整正则引擎
直接在 <input type="text"> 里写 JavaScript 风格的正则（比如 /^\d{6}$/）会失效——pattern 只接受**裸正则字面量**，不带斜杠、不带标志（g、i 等），且隐式全局匹配（开头结尾自动锚定）。中国邮政编码是 6 位纯数字，所以正确写法是：pattern="\d{6}"。
常见错误包括：pattern="/^\d{6}$/"（多加斜杠和锚点）、pattern="[0-9]{6}"（虽能用但不如 \d 直观）、pattern="\d{6,6}"（冗余，\d{6} 已足够）。
pattern 校验失败时用户看不到提示？
浏览器只在表单提交时触发校验，且默认提示文案不可控（如“请填写符合指定格式的值”）。要提升体验，得配合 title 属性：title="请输入6位数字邮政编码"。这样鼠标悬停或校验失败时，部分浏览器会显示该文字。
注意：title 不是必填，但没它，用户很可能不知道哪里错了。另外，required 要单独加，pattern 本身不强制非空。
完整示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<input type="text" pattern="\d{6}" title="请输入6位数字邮政编码" required>
为什么不能只靠 HTML 的 pattern？
客户端校验可被绕过：用户禁用 JS、手动修改 DOM、用 curl 提交等。真正可靠的校验必须落在后端（如 PHP 的 preg_match('/^\d{6}$/', $code) 或 Python 的 re.fullmatch(r'\d{6}', code)）。
前端 pattern 的作用只是快速反馈，减少无效提交。如果业务对邮编准确性要求高（比如物流下单），还应额外调用地址 API 做行政区划合理性验证，因为 123456 符合格式但未必真实存在。
输入框类型选 text 还是 number？
必须用 type="text"。用 type="number" 会导致两个问题：
一是移动端弹出数字键盘但可能带小数点或负号；二是浏览器会把开头的 0 自动截断（如输入 012345，实际值变成 12345），而邮政编码允许前导零（如北京西城区部分编码为 100032，但像西藏某些地区可能是 85xxx，不过仍需保留 6 位长度意识）。
所以：
✅ <input type="text" pattern="\d{6}">
❌ <input type="number" pattern="\d{6}">
邮编校验看着简单，但前导零处理、后端兜底、用户体验提示这三点，漏掉任何一个都可能在线上暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
