pattern属性仅对type="text"等六种类型生效，搭配number或date会被忽略；正则不加/^$/，锚点由浏览器自动添加；title是唯一提示出口，需明确描述规则；复杂校验必须用javascript实现。
pattern属性只对特定type生效，别用number或date
想用正则限制字符范围，pattern必须搭配 type="text"、type="tel"、type="email" 等六种类型——type="number" 或 type="date" 会直接忽略它。浏览器先把输入转成数字或日期对象，正则根本收不到原始字符串。
常见错误：
-
<input type="number" pattern="[a-z]{3}">：永远不校验，iOS 还可能自动删前导零 -
<input type="text" pattern="[a-z]{3}" required>：✅ 正确，保留字符串且触发校验
正则写法不能带/^$/和修饰符，锚点由浏览器自动加
浏览器会把你的 pattern 值隐式当作 ^(?:...)$ 处理，你只需写核心匹配逻辑。自己加 ^ 或 $ 不但冗余，旧版 Safari 可能直接跳过整条规则。
字符范围写法建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 要限制“仅3–16位英文、数字、下划线”：
pattern="[a-zA-Z0-9_]{3,16}"（✅ 推荐） - 别写
pattern="/^[a-z]{3,16}$/"：斜杠被当作文本，整个变成字面量匹配 - 别写
pattern="^[a-z]{3,16}$"：锚点冗余，兼容性风险 - 中文范围慎用：
pattern="[\u4e00-\u9fa5]{2,10}"在 iOS Safari 中可能完全失效
title是唯一提示出口，不设等于没写规则
title 不参与校验，但它决定用户看到的错误文案——hover、提交失败气泡、input.validationMessage 全靠它。没设 title，Chrome/Firefox 默认显示“请与所要求的格式匹配”，用户根本不知道要输什么。
实操要点：
- ❌
title="格式错误"：无信息量，无法指导修正 - ✅
title="请输入3–16位字母、数字或下划线，不能含空格"：明确、可操作 - iOS Safari 对
title支持弱，强提示场景需配合 JS 的setCustomValidity()
超出字符范围的场景必须用JavaScript接管
pattern 只做单字段、静态、全字符串匹配。以下情况它完全无效：
- 用户名是否已存在：需调用后端 API
- 密码与确认密码是否一致：需监听两个
input值并比对 - 邮箱域名白名单（如只允许
@company.com）：pattern无法做子串判断 - 实时高亮/动态提示：它只在提交时触发，不支持
input事件级反馈
真正需要控制字符范围边界（比如“前两位必须是大写字母，后四位必须是数字”），就得用 RegExp.prototype.test() 配合事件监听——而且后端必须重复校验，前端永远不可信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
