pattern属性只在表单提交时校验，无法实时拦截输入；用户仍可随意输入、粘贴任意内容，包括中文和数字，直到点击提交才触发验证。
pattern属性只在提交时校验，不是实时拦截
加了 pattern 就以为用户输不了中文或数字？错。它只在 form.submit() 或点击 type="submit" 按钮时触发，用户照常能粘贴、输入任意内容。常见现象是：输入“abc123”没报错，直到点提交才弹提示——因为正则没锚定边界，或根本没生效。
必须搭配 title 属性才能显示提示文案；否则验证失败时浏览器可能只显示默认英文或空白。
-
pattern对<input type="number">、<textarea></textarea>完全无效（除非显式设type="text"） - 正则必须用
^和$锚定：写成pattern="^[a-zA-Z]+$"，而不是pattern="[a-zA-Z]+" - 不加
required属性时，空值也能通过校验
只允许英文字母的正确 pattern 写法
要严格限制整个字段只能是英文字母（大小写均可，至少一个字符），正则必须写成：
pattern="^[a-zA-Z]+$"
拆解说明：
-
^表示开头，$表示结尾，强制“整串都得匹配”，避免 “abc123” 这类部分匹配成功 -
[a-zA-Z]明确限定字符范围，不含空格、下划线、数字、中文等 -
+表示至少一个字母；若允许空值，改用*，但通常需配合required控制非空逻辑
完整示例：
<input type="text" pattern="^[a-zA-Z]+$" required title="请输入英文字母">
为什么 oninput + replace 更可靠
想让用户“根本输不进非字母”，就得用 JavaScript 实时过滤。仅靠 pattern 无法做到这点，尤其对粘贴、IME 输入、拖拽等场景完全无感。
推荐监听 input 事件（不是 keydown），并用 replace() 清洗值：
document.querySelector('input').addEventListener('input', e => {
e.target.value = e.target.value.replace(/[^a-zA-Z]/g, '');
});
-
/[^a-zA-Z]/g匹配所有非英文字母字符，全局替换为空字符串 - 该方式兼容粘贴、自动填充、语音输入等所有输入途径
- 注意：不要用
onkeyup，它无法捕获右键粘贴和移动端长按粘贴 - 如果需保留光标位置（避免跳到末尾），得配合
setSelectionRange手动调整，否则用户连续输入易中断
容易被忽略的兼容性与安全细节
pattern 在 iOS Safari 上支持较弱，部分版本会忽略锚点或不显示 title 提示；而 JS 过滤在禁用 JS 的环境下彻底失效——所以这两层都不能少。
- 后端必须重复校验：前端任何限制都可被绕过（如禁用 JS、抓包重放、curl 直发）
- 若字段用于用户名等关键标识，还需额外检查是否含控制字符、零宽空格、BOM 等隐形非法字符
- 移动端软键盘类型由
type决定（如type="text"弹出全键盘），pattern不影响键盘行为
真正起作用的是组合：HTML 层用 pattern 做声明式约束 + JS 层用 input 事件做体验拦截 + 后端用相同正则做最终守门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
