pattern属性不触发实时验证，仅提供正则规则，需配合required且在表单提交或调用checkvalidity/reportvalidity时生效；其值为不带斜杠的正则字符串，浏览器自动锚定首尾；可配合title自定义提示，但必须后端校验兜底。
Pattern 属性本身不触发验证，它只提供正则规则，实际校验依赖浏览器对 input 元素的原生表单验证机制。 要让 pattern 生效，必须配合 required 属性（或确保输入非空），且表单提交时才会触发；用户未提交前，即使输入不匹配，也不会显示错误提示。
pattern 的基本写法和注意事项
pattern 的值是**不带斜杠的正则字符串**（不用写 /^...$/），浏览器会自动以行首行尾锚定（即隐含 ^ 和 $）。例如：
- 要求 6–12 位字母数字：
pattern="[a-zA-Z0-9]{6,12}" - 要求以字母开头、后跟字母数字或下划线：
pattern="[a-zA-Z][a-zA-Z0-9_]*" - 邮箱常用简化写法：
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"（注意：HTML5 不强制要求完整 RFC 邮箱校验，此写法够日常用）
不要加 ^ 和 $ —— 浏览器会自动添加；加了反而可能因转义问题出错。中文字符需注意编码，如要允许中文，可写 pattern="[\u4e00-\u9fa5a-zA-Z0-9_]+" （但需确认目标浏览器支持）。
配合 title 提升用户体验
pattern 验证失败时，浏览器默认提示较笼统（如“请与所要求的格式匹配”）。可通过 title 属性自定义提示文字，用户 hover 或验证失败时显示：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<input pattern="[0-9]{4}" title="请输入4位数字"><input pattern="[A-Z]{2}\d{6}" title="格式示例：AB123456">
title 内容不会影响校验逻辑，纯属辅助说明，建议简洁明确，避免技术术语。
验证时机与手动控制
pattern 只在表单提交（submit）或调用 checkValidity() / reportValidity() 时触发。如需实时反馈，需监听 input 或 blur 事件并手动检查：
-
input.checkValidity()返回布尔值，不弹提示 -
input.reportValidity()返回布尔值，且触发浏览器默认错误气泡 - 结合
setCustomValidity()可覆盖 pattern 错误信息（设为空字符串表示通过）
例如：input.addEventListener('input', () => { input.setCustomValidity(input.validity.patternMismatch ? '编号格式不对' : ''); });
兼容性与兜底建议
所有现代浏览器均支持 pattern（IE10+ 支持，IE9 及更早不支持）。但 pattern 仅作前端轻量校验，**绝不能替代后端验证**。用户可禁用 JS、绕过 HTML 表单、或直接发请求，后端必须独立校验数据格式与业务逻辑。前端 pattern 的价值在于即时友好提示，减少无效提交。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
