pattern 属性仅在表单提交时生效，需配合 required 和 title 才有效；实时校验、跨字段比对或调用 api 必须用 javascript 实现。
直接用 pattern 属性就能加，但只在提交时生效，且必须配对 required 和 title 才真正起作用；想实时提示、跨字段比对或调 API，必须写 JavaScript。
为什么 pattern 加了却没反应
最常见原因是类型或属性没配齐：
-
type必须是text、search、tel、url、email或password；number、date等类型会直接忽略pattern - 缺
required：空值默认“通过”，不拦；哪怕写了pattern="[0-9]{6}"，用户不输内容也能提交 - 没设
title：浏览器报错时只显示“请与所要求的格式匹配”，用户根本不知道要输啥 - 正则里写了
^或$：浏览器自动加锚点，冗余写法在旧版 Safari 可能整条规则被跳过
pattern 的正则怎么写才安全
它不是 JS 正则引擎，不能用修饰符，也不支持 \d 这类简写（Safari/IE 兼容性差）：
- ✅ 推荐：
pattern="[0-9]{6}"、pattern="[a-zA-Z][a-zA-Z0-9_]{3,15}" - ❌ 危险：
pattern="\d{6}"（\d不被所有浏览器识别）、pattern="/^[0-9]{6}$/"（斜杠当字面量）、pattern="^[0-9]{6}$"（锚点冗余） - 中文、emoji、全角空格等字符不会被
pattern拦住——它只做字符串匹配，不处理 Unicode 归一化
怎么实现边输边提示（input 实时校验）
pattern 天然不监听输入过程，必须用 JavaScript 补足：
- 监听
input事件做即时反馈，用RegExp.test()校验，再调setCustomValidity()控制状态 - 必须监听
blur事件兜底：用户粘贴内容后直接点提交，input可能没触发 -
setCustomValidity("")是清除错误的关键，非空字符串才会阻断提交 - 别只靠
input：中文输入法下，input在选词完成前就触发，可能拿到不完整文本；必要时要监听compositionstart/compositionend
哪些场景 pattern 根本做不到
它只是第一道轻量过滤，复杂逻辑必须交由 JS：
- 密码与确认密码是否一致：需比对两个
input的value - 用户名是否已存在：必须发请求，
pattern没网络能力 - 邮箱域名白名单（如只允许
@company.com）：pattern无法提取子串做判断 - 密码强度要求（含大小写字母+数字+符号）：需要多个
test()组合，pattern单条表达式难兼顾可读与兼容
真正容易被忽略的是：所有前端校验都可被绕过，pattern 和 JS 都只是优化体验；服务端必须用相同规则重复验证，否则等于没校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
