HTML input 的 pattern 属性不支持正则字面量、仅限ECMAScript 5.1语法、默认全匹配且非实时校验，需配合title提示和JavaScript补足兼容性与复杂逻辑。
HTML input 的 pattern 属性不能叫“正则表达式校验”
HTML 原生的 pattern 属性只支持 ECMAScript 5.1 的正则语法（不支持 lookaround、\d 在某些旧浏览器中也不稳定），且它只在表单提交时触发，不是实时校验。很多人误以为写个 /^[a-zA-Z0-9]+$/ 就能用，结果发现根本没效果——因为 pattern 只接受字符串字面量，不接受斜杠包裹的正则字面量。
正确写法是直接写不含首尾 / 的模式字符串，比如：pattern="[a-zA-Z0-9]+"。它默认是全匹配（即等价于 ^...$），不需要手动加锚点。
- 错误写法：
（浏览器会忽略整个属性） - 正确写法：
-
title属性很重要：当校验失败时，浏览器原生提示会显示该文本，否则提示语可能含糊（如“请与所要求的格式匹配”）
为什么 [a-zA-Z0-9] 在某些场景下不够用
这个字符类看似覆盖了字母+数字，但实际有三个常见疏漏：
- 不包含 Unicode 字母（比如中文、á、ñ、α），如果业务允许国际化用户名，
[a-zA-Z0-9]会误拒合法输入 - 不处理空格或下划线需求——很多系统允许
user_name或John Doe，但[a-zA-Z0-9]会拦掉 - 无法排除特定字符，比如禁止纯数字（如
123）、或要求至少含一个字母——pattern不支持正向断言，做不到这类逻辑
这时候必须退到 JavaScript 手动校验：input 事件监听 + RegExp.test()，例如：const re = /^(?=[a-zA-Z])[a-zA-Z0-9]+$/;（确保首字符是字母）。
移动端 iOS Safari 的 pattern 兼容性坑
iOS 15.4 之前，Safari 对 pattern 的支持极弱：不触发校验、不显示 title 提示、甚至忽略 required 联动。即使写了 pattern="[a-z0-9]+"，用户仍可提交空值或非法值。
- 必须搭配 JavaScript 补充校验：
input.addEventListener('invalid', e => e.target.setCustomValidity('仅支持字母和数字')) - 注意
setCustomValidity('')要在每次输入后重置，否则会持续阻塞提交 - 不要依赖
:valid/:invalidCSS 伪类做视觉反馈——iOS Safari 对它的响应延迟或缺失
真正需要“正则校验”时，别卡在 HTML 层
如果你要实现密码强度（大小写字母+数字+符号）、邮箱域名白名单、或限制长度并排除敏感词，pattern 快速失效。这些逻辑必须交由 JS 完成，HTML 只负责基础结构。
- 服务端永远要重复校验：前端任何 pattern / JS 都可绕过，
pattern仅是用户体验层的快捷过滤 - 避免在
pattern里写复杂正则（如[a-zA-Z0-9_]{3,20}看似 OK，但 IE11 会静默失败） - 调试技巧：在控制台执行
new RegExp('^[a-z0-9]+$').test('abc123')，确认正则行为符合预期，再转成 pattern 字符串
pattern 是锦上添花，不是安全锁。真要校验，JS + 后端双保险才是常态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
