pattern属性是html原生正则校验，值为裸字符串（不加/、^、$），由浏览器自动包装为/^...$/u；字符类中-须置首尾；type="number"无视pattern；需配合required和title使用。
pattern 属性不是 JS 正则字面量，写错斜杠、锚点或转义就会直接失效——浏览器报 “Invalid character in character class” 或静默跳过校验，而不是按你预期去匹配。
pattern 值必须是裸字符串，不能带 / 和 ^$
浏览器内部用 new RegExp(`^${attrValue}$`, 'u') 编译，所以你写的只是中间部分。加 / 会当成字面斜杠匹配，加 ^ 或 $ 虽不报错但冗余，还容易因转义出问题。
- ✅ 正确：
pattern="[0-9]{6}"（6位数字） - ✅ 正确：
pattern="1[3-9][0-9]{9}"（11位手机号，\d在旧 Firefox 可能不支持，用[0-9]更稳） - ❌ 错误：
pattern="/^[0-9]{6}$/"（斜杠被当字符，必然不匹配） - ❌ 错误：
pattern="^[a-z]+$"（虽能过解析，但^在属性值里易被误转义，且无必要）
字符类 [] 里 - 必须放开头或结尾
- 在 [] 中是范围连接符，放中间（如 [a-z-0-9]）会被解析为非法 Unicode 范围，导致整个 pattern 失效。
- ✅ 正确：
pattern="[a-zA-Z0-9_-]"（下划线和短横都在末尾） - ✅ 正确：
pattern="[-a-zA-Z0-9]"（短横放开头） - ❌ 错误：
pattern="[a-z%+-]"（%到+是无效范围） - ⚠️ 注意：
.、+、*在[]内无特殊含义，直接写即可；乱加\.反而触发 “identity escape” 报错
type="number" 完全无视 pattern，别踩这个坑
type="number" 会把输入转成数值再丢掉原始字符串，pattern 根本不触发。比如用户输 00123，它变成 123，pattern="[0-9]{5}" 永远不匹配。
- 要限制 6 位数字验证码？改用
type="text" inputmode="numeric" - 要校验手机号？优先用
type="tel"，iOS 不会自动删前导 1 或补零 - 要强制 http/https 开头的 URL？
type="url" pattern="https?://.*"是唯一可控方式 - 所有支持
pattern的类型只有六种：text、search、url、tel、email、password
验证失败没提示？大概率缺 required 或没写 title
pattern 默认允许空值通过；不加 required，用户留空就直接跳过校验。错误提示也只靠 title，不写就是“请与所要求的格式匹配”这种笼统文案。
- ✅ 必须配
required：<input pattern="[0-9]{4}" required title="请输入4位数字"> - ⚠️ iOS Safari 对
title支持弱，hover 不弹提示，得用 JS 补充反馈 - ⚠️ 用户修改后再次提交仍报错？因为
input.validity状态未刷新，需监听input事件并调用setCustomValidity("") - 调试时可用：
document.querySelector("input").checkValidity()手动触发，.validationMessage查当前提示
真正卡住人的往往不是正则怎么写，而是没想清楚「到底要拒绝什么」——比如中文姓名是否允许空格、手机号要不要支持 +86 前缀、下划线能否连续出现。边界定义模糊，pattern 写得再熟也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
