pattern 属性仅在提交或调用 checkValidity() 时触发全串匹配，需配合 required 和正确 type（如 text/tel）使用，正则须为裸字符串且不加 /^$/，title 用于错误提示，空值默认通过，被动校验需 JS 补充交互。
pattern 属性不是实时校验工具，它只在表单提交或调用 checkValidity() 时触发一次全串匹配——写错正则、配错 type 或漏掉 required，都会导致它静默失效。
pattern 正则必须是裸字符串，不能带 / 斜杠或 ^ $ 锚点
浏览器内部会自动把 pattern 值当作 ^...$ 全匹配处理。加斜杠或显式锚点不仅多余，还会让正则变成字面量字符，直接失效。
- ✅ 正确：
pattern="[0-9]{6}"（6位数字） - ❌ 错误：
pattern="/^[0-9]{6}$/"（斜杠被当作文本，报“Unable to check”） - ❌ 错误：
pattern="^[0-9]{6}$"（^和$虽不报错，但无意义，且易与 JS 逻辑混淆） - ⚠️ 注意：
\d在部分旧版 Firefox 不支持，坚持用[0-9]更稳妥
type="number" 等非文本类型完全忽略 pattern
pattern 只对 type="text"、type="tel"、type="email"、type="password" 等文本类输入生效。一旦设成 type="number"，浏览器会先解析为数值、过滤非数字字符，然后跳过 pattern 校验。
- 验证码、带前缀的编号、手机号 → 必须用
type="text"或type="tel" - 想唤起数字键盘又保 pattern 有效？加
inputmode="numeric"（比type="number"更可靠） -
type="date"、type="checkbox"、type="file"→pattern一律无效
空值默认通过，不加 required 就等于没校验
哪怕你写了 pattern="[0-9]{6}"，用户不输任何内容也能提交成功——因为浏览器默认允许空值通过验证。这是最常被忽略的硬性前提。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
required才能实现「必填 + 格式」双重拦截 -
title不是可选项：它决定验证失败时的提示文案，不写就只能看到“请与所要求的格式匹配”这类不可读提示 - 移动端 Safari 对
title支持弱，iOS 用户可能根本看不到提示，得靠 JS 补位
中文、手机号、邮箱等常见 pattern 写法
别直接抄 JS 正则，注意字符类中 - 的位置、Unicode 写法双 u、以及移动端兼容性。
- 纯中文（2–10 字）：
pattern="[u4e00-u9fa5]{2,10}"（u是 HTML 属性中 Unicode 的必需写法，单\u会被解析器吞掉） - 11 位手机号：
pattern="1[3-9][0-9]{9}"（不用\d，避免兼容问题；-放在[0-9]中安全） - 基础邮箱：
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}"（末尾$可省，浏览器自动补；大小写敏感，必要时加 CSStext-transform: lowercase） - 密码强度（8+位，含大小写/数字/符号）：
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}"（iOS 15.4 之前 Safari 不支持 lookahead，慎用）
真正容易被忽略的不是语法细节，而是它的被动性：它不监听输入、不自动重置状态、不处理粘贴空格、也不告诉你错在哪——所有“看起来该有但没有”的反馈，都得靠 JS 补上 input 事件 + setCustomValidity("") + reportValidity() 这套组合拳。
