pattern属性仅对type="text"、"search"、"tel"、"url"、"email"、"password"有效；纯英文校验应使用^[a-za-z]+$，需配合required和title触发提示，且注意空格与移动端键盘适配。
pattern 属性只对 type="text" 等可编辑输入有效
不是所有 <input> 类型都支持 pattern：它仅在 type="text"、type="search"、type="tel"、type="url"、type="email" 和 type="password" 上触发验证。如果你用了 type="number" 或 type="date"，pattern 会被忽略——浏览器压根不拿它做校验。
要限制纯英文，必须用 type="text"（或兼容的类型），并配合法则明确的正则。
正则写法：^[\w]+$ 还是 ^[a-zA-Z]+$？
关键看你要不要允许下划线和数字：
-
^[a-zA-Z]+$：严格纯字母，不含空格、数字、下划线、连字符 -
^[\w]+$等价于^[a-zA-Z0-9_]+$：允许字母、数字、下划线，但不允许空格和标点 -
^[a-z]+$/i写法等效于^[a-zA-Z]+$，但i标志在pattern中无效（HTML pattern 不支持标志位），所以必须显式写[a-zA-Z]
常见错误是漏掉锚点 ^ 和 $：没有它们，pattern="[a-zA-Z]+" 会匹配任意含英文字母的字符串（比如 "abc123" 也能过）。
必须配合 novalidate 或 required 才能触发提示
仅设 pattern 不会自动弹出浏览器原生提示。用户点击提交时，如果表单没加 novalidate，且该字段有 required，验证才会生效。
示例正确写法：
<input type="text" pattern="[a-zA-Z]+" required title="请输入纯英文">
其中 title 是必填项——它定义了验证失败时的提示文案，否则 Chrome 等浏览器可能只显示“请与所要求的格式匹配”，非常不友好。
注意：pattern 验证发生在提交时，不是实时的；如需实时反馈，得用 JavaScript 监听 input 或 blur 事件手动检查 value 是否匹配 /^[a-zA-Z]+$/。
移动端键盘适配和实际体验问题
即使正则正确，iOS Safari 和部分安卓输入法仍可能默认弹出数字键盘或混合键盘，影响输入效率。可以加 inputmode="text" 提示系统优先调英文键盘：
<input type="text" pattern="[a-zA-Z]+" inputmode="text" required title="请输入纯英文">
但要注意：inputmode 是提示性属性，不强制拦截非法输入；用户仍可粘贴数字或中文，最终还得靠 pattern + 提交验证兜底。
真正容易被忽略的是空格——[a-zA-Z] 不包含空格，所以带空格的英文名（如 "John Doe"）会直接被拒。若需支持，得改成 ^[a-zA-Z\s]+$ 并确认业务是否接受空白字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
