pattern属性只对text、search、tel、url、email、password类型生效，正则需省略首尾斜杠和^$，不校验空值与空格，无实时反馈，不可替代后端校验。
直接写正则字符串，别加 /，也别写 ^ 和 $——浏览器自动帮你锚定整个输入值。
pattern 属性不接受 JavaScript 风格的正则字面量
很多人复制 JS 里的 /^[a-z]+$/ 直接塞进 pattern，结果不生效甚至报错。根本原因是：pattern 值是纯字符串，不是 JS 正则字面量；浏览器内部用 new RegExp(pattern, 'u') 编译，首尾 / 会被当成要匹配的字面斜杠。
- ❌ 错误：
→ 实际要求输入以/开头、/结尾 - ✅ 正确：
- 显式写
^和$虽不报错，但冗余；保留也可，语义更清楚，不影响兼容性
字符类里连字符 - 必须放开头或结尾
在 [a-zA-Z0-9._%+-] 这种写法中，- 在中间（前是 %，后是 +），浏览器会尝试解析为 “% 到 +” 的 Unicode 范围，而这是非法的，直接触发 Invalid character in character class。
- ❌ 危险：
[a-z%+-]、[._%-] - ✅ 安全：
[-a-z%.+]或[a-z%.+-]（推荐放末尾） - 注意：点号
.在字符类内就是字面量，不用写成.；下划线_也无需转义
别乱加反斜杠——Unicode 模式下“身份转义”非法
HTML 的 pattern 默认启用 u 标志，对本无特殊含义的字符加 （比如 +、.、{）会被当作语法错误，报 Unable to check invalid identity escape。
- ✅ 允许转义的：只有真正有元字符意义的，如
[、]、(、)、^、$、\ - ❌ 禁止转义的：
+、.、{、}、#、'—— 这些直接写+、.、{就行 - 方括号
[]内的]必须紧跟[后（即写成[]...]），否则需转义为]
实际校验要配合 trim() 和 type 属性
HTML 原生 pattern 不会自动去除首尾空格，用户输 " test123 " 可能绕过 ^[a-z]+$ 校验；同时 type="email" 本身已有基础检查（必须含 @、不能以 @ 开头等），pattern 是增强，不是替代。
- 表单提交前 JS 校验时，务必先调用
.trim()：input.value.trim() - 手机号、验证码等场景优先用
type="tel"或type="text"，避免type="number"因自动过滤符号导致 pattern 失效 -
title属性必须配，否则提示是“请与所要求的格式匹配”，用户根本看不懂
最常被忽略的一点：pattern 只在表单提交时触发，不监听实时输入；如果要做实时反馈，得自己用 JS 绑定 input 或 blur 事件，且要注意 value.trim() 和正则构造方式（new RegExp(str, 'u')）是否与 HTML 中一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
