html pattern属性自动隐含^和$，显式添加会导致兼容问题；应写\d{6}而非^\d{6}$，避免.的模糊性，并配合maxlength与js截断确保长度校验可靠。
HTML 原生不支持正则表达式校验固定长度字符串——pattern 属性虽接受正则，但浏览器对它的支持有隐性限制，尤其是涉及锚点和长度断言时容易失效。
为什么 pattern 无法直接写 ^.{5}$
表面上看，<input pattern="^.{5}$"> 应该只允许 5 个任意字符，但实际上：
- HTML 表单的
pattern属性**自动隐含 ^ 和 $**，你写的正则会被包裹成^(?:...)$，所以显式加^和$是冗余甚至引发兼容问题的 - 某些旧版 Safari 和 Android WebView 会错误地将
.匹配换行符（尽管用户输入框里通常不会出现），导致长度判断偏差 -
.不匹配 Unicode 组合字符（如带重音的 é 在某些编码下是两个码元），maxlength按 UTF-16 码元计数，而pattern按 Unicode 字符计数，二者可能不一致
正确写法：用 {n} 量词 + 显式字符集
要严格限定 6 位数字，别写 ^\d{6}$，直接写：
<input type="text" pattern="\d{6}" title="请输入6位数字">
关键点：
- 去掉
^和$—— 浏览器已自动锚定 - 优先用
\d、[a-z]等明确字符集，避免.的模糊性 - 若需中英文混合+数字共 8 位，写
[a-zA-Z0-9\u4e00-\u9fa5]{8}（注意：\u4e00-\u9fa5 覆盖常用汉字，但不全；真正需要全量中文请后端补校验） -
title属性必须写，否则校验失败时无提示
与 maxlength 配合使用时的陷阱
maxlength="5" 和 pattern=".{5}" 看似等价，实际行为不同：
-
maxlength是**输入拦截**：用户打到第 6 个字符时直接被截断，无法输入 -
pattern是**提交校验**：用户可输入超长内容，直到点击提交才报错 - 两者同时存在时，
maxlength优先生效，但若用户粘贴超长文本，部分浏览器（如 Chrome）可能绕过maxlength，仅靠pattern把关 - 安全起见：前端用
maxlength做体验层限制，pattern做语义层校验，后端仍需独立验证长度和格式
真正卡死长度的唯一可靠方式，是结合 JavaScript 监听 input 事件手动截断，因为 pattern 只在表单提交时触发，且不阻止非法中间状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
