HTML5 pattern属性匹配整个输入值而非部分，浏览器自动添加^和$锚点；不自动trim，需显式处理空格；title提供错误提示文案；校验需调用checkValidity()或reportValidity()。
HTML5 pattern 属性到底匹配什么？
pattern 属性只对 <input type="text">、<input type="search">、<input type="tel">、<input type="url">、<input type="email"> 和 <input type="password"> 生效，且**默认隐式添加 ^ 和 $ 锚点**。也就是说，你写的正则不会“部分匹配”，而是必须完全匹配整个输入值。
为什么写了 pattern="[0-9]+" 却不校验空格？
因为浏览器内部把你的正则自动包装成 ^[0-9]+$，空格、换行、开头/结尾的空白都会导致匹配失败。但注意：它**不自动 trim 输入值**，所以用户输入 " 123 "（带空格）会直接被判定为不匹配。
- 想允许首尾空格？显式写进正则：
pattern="^[0-9\s]*$"（注意 \s 在 HTML pattern 中支持有限，更稳妥用pattern="^\s*[0-9]+\s*$"） - 想匹配中文数字或字母？确保使用 Unicode 属性或明确字符集，比如
pattern="^[\u4e00-\u9fa5a-zA-Z0-9]+$" - 小写字母限制？
pattern="^[a-z]{3,10}$"—— 必须全小写、3–10 位，不能含数字或下划线
title 属性不是可选的，它是错误提示的关键
当输入不匹配 pattern 时，浏览器原生报错弹窗显示的是 title 的内容，不是正则本身。没写 title，用户只会看到模糊的“请与所要求的格式匹配”。
<input type="text" pattern="[0-9]{6}" title="请输入6位数字验证码">
如果用户输 "123" 或 "abc123"，都会触发这个提示。没有 title，体验极差，且无法本地化控制文案。
立即学习“前端免费学习笔记（深入）”；
JavaScript 中怎么手动触发 pattern 校验？
调用 checkValidity() 或 reportValidity() 才会真正执行 pattern 匹配逻辑；单纯读取 value 不触发校验。
-
input.checkValidity()返回布尔值，不弹窗 -
input.reportValidity()返回布尔值，且在不通过时显示原生提示（含title文案） - 注意：pattern 校验是同步的，但依赖元素已插入 DOM 且
type合法，动态创建后需确保已挂载
容易忽略的一点：pattern 对 input.value = "xxx" 赋值不会自动触发校验，必须显式调用上述方法。表单提交时才会自动触发所有字段的 pattern 检查。
