pattern属性仅接受裸正则字符串，如[0-9]{6}，不支持/^...$/语法、零宽断言及错误转义；仅对text/tel/email等文本类type生效，需配title提示，且验证状态需手动重置。
pattern 属性只接受裸正则字符串，不是 JS 正则字面量
直接把 /^[0-9]{6}$/ 这种带斜杠和标志的写法粘贴进 pattern 会失效——浏览器解析时抛出 “Invalid regular expression” 或静默忽略。它只认裸字符串，比如 [0-9]{6}，内部用 new RegExp(pattern, 'u') 编译，并自动加上 ^ 和 $ 锚定全串。
常见翻车点：
-
pattern="^[a-z]+@.+$"—— 多余的^和$可能因转义或解析歧义导致匹配异常 -
pattern="[a-z%+-]"—— 连字符-在字符类中间被当成范围符，报 “Invalid character in character class”，应写成[a-z._%+-]或[-a-z._%+] -
pattern="(?=.*\d)(?=.*[a-z]).{8,}"—— 零宽断言(?=...)不被支持，整个表达式当普通文本处理，校验恒通过
哪些 input type 能用 pattern，哪些根本无效
pattern 只对文本类输入生效：type="text"、type="tel"、type="email"、type="url"、type="password"、type="search"。其他类型一律无视。
特别注意：
-
type="number"完全不读pattern—— 它走的是数值校验路径，想限制“6位纯数字”就得改用type="text" inputmode="numeric" -
type="email"自带基础校验（必须含@、不能以@开头），pattern是叠加增强，不是替代 - 移动端
type="tel"比type="text"更可能唤起数字键盘，但 Safari 对含中文 Unicode 的pattern（如[\u4e00-\u9fa5]+）支持不稳定，慎用
验证失败时没提示？缺 title 就是默认废话
不加 title，Chrome/Firefox 默认只显示“请与所要求的格式匹配”，用户根本不知道哪里错了。这个属性不是可选配件，是提示刚需。
实操建议：
-
title文案要具体，比如title="请输入11位手机号，不要加空格或括号"，而不是title="格式错误" - 中文字符需显式声明编码范围，如用户名允许中文+字母+数字：
pattern="[\u4e00-\u9fa5a-zA-Z0-9_]{2,16}" title="2–16位，支持中文、字母、数字和下划线" - 若同时用
setCustomValidity()覆盖错误信息，记得在input事件里清空：input.setCustomValidity("")，否则旧错误残留卡住后续提交
为什么改完内容还报错？状态没重置是常见坑
pattern 校验只在表单 submit 或调用 checkValidity()/reportValidity() 时触发，但验证状态（如 input.validity.patternMismatch）不会自动随输入变化重置。用户输错后删掉重输，仍可能卡在失败态。
解决方案：
- 监听
input事件，每次输入后手动清理：input.addEventListener('input', () => { input.setCustomValidity(''); }); - 需要实时视觉反馈（如标红）时，配合
input.checkValidity()判断并切换 CSS 类，别只靠reportValidity()弹气泡 - 调试时可在控制台执行
document.querySelector('input').checkValidity()手动触发验证，看返回true/false和validationMessage内容
pattern 的边界非常清晰：它只是浏览器帮你拿尺子量一下字符串形状，量不准、绕不开、也拦不住恶意请求。真正决定数据能不能入库的，永远是后端那行 if !whitelist_regex.match(input): reject()。
