pattern="[A-Z]+"：✅ 接受"ABC"、"X"，拒绝""、"ab"、"A1"、"A B"；❌[A-Z]*允许空，[A-Z]仅限单字符，^[A-Z]+$可能兼容性差。
HTML input 的 pattern 属性怎么写只允许大写字母
HTML 本身不执行正则匹配，但 <input> 的 pattern 属性可声明一个正则，由浏览器在提交前做基础校验。要限制「只允许大写字母」，正则必须同时满足：**不能为空、不能含空格、不能含小写/数字/符号**。
正确写法是：pattern="[A-Z]+". 注意不是 [A-Z]*（* 允许空）、也不是 [A-Z]{1,}（等价但冗余），更不能漏掉 + 导致单字符限制失效。
-
pattern="[A-Z]+"：✅ 接受 "ABC"、"X"，拒绝 ""、"ab"、"A1"、"A B" -
pattern="[A-Z]*"：❌ 允许空字符串，表单能直接提交 -
pattern="[A-Z]"：❌ 只允许且仅限 1 个大写字母 -
pattern="^[A-Z]+$"：⚠️ ^ 和 $ 在 pattern 中自动隐含，加了反而可能在某些旧浏览器中出兼容问题
为什么用 pattern 而不用 JavaScript 手动监听
单纯防用户误输时，pattern 是最轻量的方案：无需 JS、自动触发浏览器默认提示（如 title 或气泡）、支持 :valid/:invalid 伪类样式控制。但它只是客户端校验，服务端仍需重复验证。
真正需要「实时拦截输入」（比如禁止用户敲小写字母）时，pattern 就不够用了——它只在校验时机（如提交、失去焦点）起作用，不阻止键盘输入。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 想实时过滤：得用
input事件 +event.target.value = value.replace(/[^A-Z]/g, '') - 想保留光标位置：替换后需手动恢复 selection，否则光标会跳到末尾
- 移动端软键盘行为差异大，
pattern的提示有时不显示，JS 方案也得加onpaste防粘贴绕过
常见错误：locale-sensitive 字符范围陷阱
看似 [A-Z] 很安全，但在某些 locale 下（比如土耳其语系统），toLocaleUpperCase() 行为不同，而浏览器 pattern 引擎一般不走 locale 转换——所以通常没问题。但如果你未来要扩展支持带重音的大写字母（如 À、É），[A-Z] 就完全无效了。
- 纯 ASCII 大写字母：坚持用
[A-Z]最稳 - 需要国际化大写：改用 Unicode 属性类
\p{Lu}+，但必须加pattern="\p{Lu}+"+title="请输入大写字母"，且需input标签加lang="en"或明确声明pattern的正则引擎支持 Unicode（目前仅 Chromium 120+ 和 Safari 17.4+ 稳定支持） - 别写
[A-Za-z]或\w：它们都包含小写或数字下划线，违背「只允许大写字母」前提
后端必须重校验，pattern 只是辅助
所有前端校验都能被绕过：禁用 JS、修改 DOM、用 curl 直接 POST。后端收到数据后，仍要用对应语言的正则再判一次，比如 Python 用 re.fullmatch(r'[A-Z]+', value)，Node.js 用 /^[A-Z]+$/.test(value)。
容易忽略的一点是：前后端正则语义要严格一致。例如前端用 [A-Z]+，后端若写成 [A-Z]* 或漏了 ^/$，就会放行空值或前后带空格的字符串。
真正难的不是写对正则，而是让前后端、不同浏览器、不同输入方式（键盘/粘贴/语音）的行为收敛到同一约束上。
