在标签中使用pattern属性可实现提交前格式校验，其值为不带斜杠和^$的正则字符串，浏览器自动添加锚点并启用u标志；仅text、password、email等文本类type支持，number、textarea等不支持；字符类中连字符-须置于方括号开头或结尾；需配合title提供提示，且后端必须二次验证。
直接在 <input> 标签里加 pattern 属性，值写正则表达式字符串（不带斜杠、不加 ^ 和 $），再配上 title 提示用户，就能实现提交前的格式校验。
pattern 值怎么写才对
它不是 JS 正则字面量，而是纯字符串。浏览器会自动加上 ^ 和 $，并启用 u（Unicode）标志。
- ✅ 正确：
pattern="[a-z]{3,12}"（匹配 3–12 个小写字母） - ❌ 错误：
pattern="/^[a-z]{3,12}$/"（斜杠和锚点多余，还可能报错） - ❌ 错误：
pattern="^[a-z]{3,12}$"（^和$虽不报错但冗余，转义易出错）
哪些 input 类型支持 pattern
只对文本类输入生效：包括 text、password、email、tel、search 等。
- ⚠️
type="number"下pattern完全无效，得改用type="text" inputmode="numeric" - ⚠️
<textarea></textarea>和contenteditable元素不支持pattern，必须用 JS 手动监听和验证 - ✅
type="email"可配合精简pattern，比如pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"，避免和原生校验冲突
字符类里的连字符 - 怎么放才安全
在 [...] 里，- 必须放在开头或结尾，否则会被当成范围符（如 a-z），容易出错。
- ✅
[a-zA-Z0-9_-]（-在末尾） - ✅
[-a-zA-Z0-9]（-在开头） - ❌
[a-z-0-9]（-夹中间，解析失败） - ? 小技巧：统一把
-放末尾，最省心
怎么让用户看得懂错在哪
pattern 自身不提供具体错误位置，但能配合 title 给出友好提示。
- 必加
title，例如：title="请输入6位数字验证码" - 建议搭配
required，避免空值绕过校验 - 前端校验只是辅助，后端仍需做相同逻辑的验证，不能跳过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
