pattern属性仅提交时触发且不支持^$锚点，需配合javascript test()实时验证，并用setcustomvalidity()配合reportvalidity()实现可靠反馈。
直接用 pattern 属性就能做轻量正则验证，但浏览器只在提交时触发、不支持 ^ 和 $ 的显式锚点、且错误提示靠 title —— 用户不 hover 就看不到，移动端还常失效。真要可靠反馈，必须配 JavaScript 的 test()。
pattern 属性怎么写才生效
它只接受纯字符串形式的正则，不能带斜杠和修饰符；浏览器会自动当成全匹配处理（等价于隐式加了 ^ 和 $）。
-
pattern="[0-9]{6}"表示“必须且只能是 6 位数字”，输12345或1234567都失败 -
pattern="1[3-9]\d{9}"可用于手机号，但别指望它过滤空格或括号；type="tel"更合适 - 千万别写
pattern="/^[0-9]{6}$/"—— 斜杠会被当作文本字面量，整个 pattern 失效 - 错误提示必须靠
title：比如title="请输入6位验证码"，否则用户提交失败时可能只看到空白弹窗
JavaScript test() 实时验证的关键点
test() 是可控验证的核心，但它对输入值很敏感，稍不注意就误判。
- 正则必须用字面量写法：
const phoneRegex = /^1[3-9]\d{9}$/；避免new RegExp("...")，否则要双重转义 - 调用前务必
.trim()：邮箱、用户名等字段前后有空格会导致test()直接返回false - 中文姓名别硬套
[\u4e00-\u9fa5]—— 它不含「·」、英文名、港澳台常用异体字；更实用的是[\u4e00-\u9fa5a-zA-Z·\s]+ 长度限制 - 手机号验证别只信
/^1[3-9]\d{9}$/：漏掉 170/171/166 等号段；可放宽为/^1[3-9]\d{9}$|^1[3-9]\d{4}\d{5}$/，兼容粘贴进来的分隔符
setCustomValidity() 容易踩的坑
这个 API 能自定义错误信息，但状态不会自动清空，一不留神就卡死表单。
-
setCustomValidity("")必须每次输入后重置，否则旧错误残留；建议绑定input或blur事件来清理 - 验证失败时设非空字符串：
input.setCustomValidity("手机号格式不对")；成功时一定要设空字符串，否则后续提交永远被阻断 - 仅调用
setCustomValidity不会触发 UI 反馈，需配合reportValidity()才能强制显示错误 - 移动端 Safari 对
setCustomValidity支持不稳定，部分机型不显示提示，得 fallback 到手动 DOM 提示
最麻烦的不是写正则，而是边界处理：空格、粘贴、中英文标点混输、输入法未上屏内容、移动端软键盘回车行为……这些地方一漏，用户就会反复提交失败却不知原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
