pattern属性仅在表单提交时校验，不阻止实时输入；其正则默认全匹配（隐式^...$），不支持标志和unicode属性类，需配合css伪类或js实现主动反馈。
pattern属性只在提交时校验，不阻止实时输入
很多人以为给 <input pattern="..."> 加了正则，用户就输不进非法字符——其实不是。pattern 仅在表单调用 checkValidity() 或触发 submit 事件时生效，它不拦截键盘输入，也不监听 input/change 事件。也就是说，用户可以随便打字，直到点击提交才弹出浏览器默认提示（如“请匹配此格式”）。
常见误区是拿它当实时过滤器用。真要限制输入内容，得配合 input 事件 + event.target.value 截断或修正，或者用 beforeinput（兼容性稍差）。
-
pattern的正则默认是“全匹配”，即隐式包裹了^...$，不需要自己写锚点 - 浏览器校验失败时，
input.validity.patternMismatch为true - 提示文案无法自定义（除非用
setCustomValidity()覆盖） - 移动端软键盘类型可能受影响（比如
pattern="[0-9]*"会唤起数字键盘）
中文、空格、特殊符号要显式转义或使用 Unicode 类
正则里写中文字符本身没问题，但容易漏掉常见干扰字符：全角空格（ ）、不间断空格（ ）、换行符、制表符。如果业务要求“只能输中文和英文数字”，光写 [a-zA-Z0-9\u4e00-\u9fa5] 还不够——它不包含中文标点，也不排除空格。
更稳妥的做法是明确“允许什么”，而不是“排除什么”。例如限制手机号：pattern="1[3-9]\d{9}" 比 pattern="[^\s]+" 可靠得多。
- 中文常用范围：
\u4e00-\u9fa5（基本汉字），需注意生僻字、emoji 不在此列 - 空格必须显式写进字符类，如
[a-z\u4e00-\u9fa5 ]（末尾空格） - 避免用
.匹配任意字符——它会匹配换行符，而input值默认单行，实际不会出现换行，但语义易误导 - 如果允许留空，记得加
required属性控制是否必填，pattern本身不改变空值逻辑
测试 pattern 正则时别忽略浏览器差异
Chrome 和 Firefox 对 pattern 的正则引擎支持一致（都是基于 JavaScript RegExp），但 Safari 在旧版本（≤15.4）中对 Unicode 属性类（如 \p{Letter}）完全不支持，且不报错，直接当无效 pattern 处理（等效于没写）。所以生产环境慎用 \p{...}、\P{...}。
另外，pattern 中不能使用标志（flags），比如你写 pattern="abc/i"，斜杠和 i 会被当成字面量，导致永远不匹配。
- 推荐只用 ECMAScript 5.1 兼容的语法：字符类、量词、分组，避免后行断言、命名捕获组
- 调试技巧：把 pattern 字符串复制到 JS 中用
new RegExp('^' + pattern + '$').test(value)手动验证 - 移动端 iOS Safari 对某些边界情况（如开头/结尾的 \s）处理较松，建议真机实测关键字段
结合 :valid/:invalid 伪类做基础 UI 反馈
单纯靠提交时浏览器提示太被动。可以用 CSS 的 :valid 和 :invalid（注意：后者在用户未交互前也生效，需配合 :user-invalid 或 JS 控制 class）做视觉反馈。
例如：
input:valid { border-color: #4caf50; }
input:invalid:not(:placeholder-shown) { border-color: #f44336; } 这样用户在输完失焦时就能看到状态变化。
-
:invalid在 input 初始为空且有required时也会触发，所以要用:not(:placeholder-shown)或:not(:focus)过滤掉未操作状态 - JS 中监听
input事件并手动调用reportValidity()可强制触发校验（但会弹窗，慎用） - 真正健壮的方案是：前端用
pattern+ CSS 做轻量反馈，后端再做一次相同正则校验——因为 pattern 可被绕过（禁用 JS 或直接发请求）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
