pattern属性不控制字符数量，仅校验正则匹配；需用^和$锚定边界实现格式长度约束，但无法实时拦截超长输入，真正截断须依赖maxlength；type="number"下pattern和maxlength均失效，服务端必须重验。

pattern 属性不能限制最大长度，别被误导

直接说结论：pattern 属性本身**不控制字符数量**，它只做“是否匹配正则”的布尔判断。很多人误以为写 pattern=".{1,10}" 就能卡死 10 字符上限，但实际效果是：只要输入内容整体匹配这个模式（比如填了 15 个字母），表单照样能提交——pattern 完全不干预长度超限行为。

真正硬性截断或阻止输入的，只有 maxlength；pattern 的作用仅限于格式合规性校验，和长度是两回事。

想用正则“间接”控长，得靠 ^ 和 $ 锚定边界

如果非要用 pattern 实现“必须恰好 1–10 字符且只能是字母数字”，就得强制约束整个字符串的起止：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• pattern="^[a-zA-Z0-9]{1,10}$" —— ^ 和 $ 把匹配锁死在首尾，避免用户输“abc123!@#”这种混杂内容时意外通过
• 注意：这依然不阻止用户输入第 11 个字符，只是提交时校验失败；要实时拦截，必须配 maxlength="10"
• 中文、emoji、全角符号都算 1 个字符，但 {1,10} 按 Unicode 码点计数，和 maxlength 行为一致

type="number" 下 pattern 和 maxlength 都失效

遇到数字输入场景，尤其要小心类型陷阱：

• <input type="number" pattern="[0-9]{1,3}" maxlength="3"> —— 这两个属性在 type="number" 下**完全被忽略**
• 正确做法是换用 type="text" + pattern + inputmode="numeric"（提升移动端体验），再加 JS 做实时过滤
• 若坚持用 type="number"，应改用 min/max + step，它们才是该类型下真正生效的原生约束

服务端永远要重验，前端 pattern 只是辅助

浏览器对 pattern 的支持虽已普及，但绕过方式极简单：

• 禁用 JS 后直接改 DOM 移除 pattern 属性
• 用 curl/postman 构造请求跳过前端校验
• 旧版 Safari 对某些 Unicode 字符的 ^$ 锚定行为不一致

所以任何依赖 pattern 控制长度的逻辑，后端必须用相同正则（如 /^[a-zA-Z0-9]{1,10}$/u）重新跑一遍——尤其是涉及用户名、订单号等关键字段时，前端那层只是用户体验优化，不是安全防线。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！