只允许英文字母的 pattern 正则为 ^[a-za-z]+$，它拒绝空值、数字、空格、中文及符号；若需允许空值则用 ^[a-za-z]*$，且必须加 ^ 和 $ 锚定全文，否则校验失效。
只允许英文字母的 pattern 正则怎么写？
直接用 ^[a-zA-Z]+$ 即可，但要注意它会拒绝空输入、数字、空格、中文和所有符号。如果你希望允许空值（比如非必填字段），得改成 ^[a-zA-Z]*$ —— * 表示“零个或多个”，+ 是“至少一个”。
常见错误是漏掉首尾的 ^ 和 $：写成 [a-zA-Z]+ 看似一样，实际会导致校验失效——浏览器只检查是否“包含”匹配片段，而不是“整个字符串都匹配”。例如输入 abc123 也会通过。
pattern 不生效？检查这几点
pattern 只在表单提交时触发（或调用 checkValidity()），不会实时拦截输入。用户仍可敲入数字或中文，只是提交时会报错并聚焦到该字段。
- 必须配合
type="text"（或省略 type，默认为 text），type="number"或type="email"会覆盖 pattern 行为 - 必须有
required属性，或手动调用验证，否则空值不会触发 pattern 检查 - Chrome 等浏览器默认提示文案是英文，如需自定义，要用
setCustomValidity()配合事件监听 - 移动端软键盘不会自动切为英文模式，pattern 对输入法无约束力
大小写、连字符、下划线要不要放行？
业务中常需要放宽限制。比如用户名常允许小写字母+数字+下划线：^[a-z0-9_]+$；产品编号可能含连字符：^[A-Za-z0-9-]+$。注意：连字符 - 必须放在字符组开头或结尾，否则会被解析为范围符（如 a-z）。
如果要排除某些字母（比如禁用 l 和 O 防混淆），可用否定字符组：^[a-km-np-zA-KM-NP-Z]+$。不过这种逻辑容易出错，建议后端再校验一次。
正则本身不区分 Unicode 字母（如 à、ñ），若需支持带音标的西欧字符，得用 \p{L}，但目前仅 Chrome/Edge 110+ 支持，且需加 u 标志：^\p{L}+$，兼容性差，不推荐用于基础场景。
为什么不用 JavaScript 实时过滤？
实时监听 input 事件 + replace() 看似更“严格”，但会破坏用户操作习惯：粘贴整段文本时被截断、撤销（Ctrl+Z）行为异常、屏幕阅读器兼容性下降。HTML5 的 pattern 是声明式校验，语义清晰、无障碍友好、无需额外 JS 维护。
真正需要拦截输入的场景（如强制转小写、过滤 emoji），应结合 input 事件与 setSelectionRange 修正光标位置，但这已超出 pattern 职责范围。多数情况下，守住提交关口比卡死输入更稳妥。
pattern 的边界很明确：它只管“提交前是否符合格式”，不管“用户怎么输”。别指望它替代后端校验，也别用它实现复杂交互逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
