pattern属性仅对type="text"、"tel"、"email"等文本类输入生效，type="number"等类型会忽略它；正则须为裸字符串，不加/^$/，浏览器自动全匹配；需配合required和title使用。
pattern 属性只在 type="text" 等可编辑输入类型中生效
它不会对 type="number"、type="email" 或 type="date" 起作用——浏览器会先执行原生类型校验，再轮到 pattern。比如你给 type="number" 加了 pattern="[0-9]{3}"，实际根本不会触发，因为输入非数字时浏览器已拦截并报错 The value must be a number。
正确做法是统一用 type="text"，靠 pattern 和 inputmode 协同控制体验：
-
inputmode="numeric"呼出数字键盘（移动端友好） -
pattern="[0-9]{3}"限制仅允许三位纯数字 - 搭配
title提示用户格式，如title="请输入3位数字"
正则开头结尾不加 ^ 和 $，浏览器自动补全
pattern 的匹配逻辑是“整个字符串必须完全匹配”，等价于 ^your-pattern$。手动加上 ^ 或 $ 不报错，但多余且易出错——比如写成 pattern="^[a-z]+$" 没问题，但写成 pattern="^[a-z]+"（漏掉 $）会导致意外通过 "abc123" 这类输入，因为浏览器实际按 ^[a-z]+$ 执行，而你的正则本意可能只是“以小写字母开头”。
所以直接写核心部分即可：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 手机号（11位数字）→
pattern="[0-9]{11}" - 中文姓名（2–4个汉字）→
pattern="[\u4e00-\u9fa5]{2,4}" - 密码（至少8位，含大小写字母和数字）→
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
验证失败时的提示依赖 :valid/:invalid 伪类和 title 属性
浏览器原生不弹窗，只在提交时阻止表单并高亮输入框。用户需要知道哪里错了，得靠两层配合：
- CSS 中用
:invalid:not(:placeholder-shown)设置红边框或图标（:placeholder-shown排除空值误判） -
title属性内容会在鼠标悬停时显示，也是提交失败时的默认提示文案 - 注意：Safari 对
title支持稳定；Chrome 在某些版本中可能忽略它，建议同时用 JS 监听invalid事件补充提示
例如：
<input type="text" pattern="[0-9]{6}" title="请输入6位验证码" required>
pattern 无法替代后端校验，且对复杂逻辑支持有限
它只是轻量级前端守门员，不能处理上下文依赖（比如“密码不能和用户名相同”）、长度动态变化（“最多比用户名长5位”），也不防绕过（禁用 JS 或直接发请求）。更关键的是兼容性细节：
- IE 完全不支持
pattern，需降级为 JS 校验 - 某些安卓 WebView 对 Unicode 字符类（如
\u4e00-\u9fa5）解析异常，建议用具体字集或服务端兜底 - 正则中的
\s在部分浏览器中不匹配全角空格，要写成[ \u3000]
真正要拦住错误数据，pattern 只负责把明显不合规则的输入挡在第一关，后面还得看后端是否严格复验——而且后端不能信任任何前端传来的正则结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
