HTML input的pattern属性正则用法？表单格式限制解析-html教程-PHP中文网

pattern属性仅在表单提交或调用checkValidity()时触发全字符串匹配，不实时校验；它接受无斜杠、无标志的裸正则字符串，浏览器自动隐式添加^$锚定，type="number"等非文本类型不支持。

html input的pattern属性正则用法？表单格式限制解析

pattern 属性不会实时校验，只在表单提交或调用 checkValidity() 时触发全字符串匹配；它不是 JS 正则字面量，不能带 /，也不支持 i、g 等标志。

pattern 的正则必须写成裸字符串，不能加 /

浏览器把 pattern 当作纯字符串解析，自动以 ^ 和 $ 锚定首尾。加斜杠等于让浏览器去匹配字面的 / 字符，必然失败。

❌ 错误： → 浏览器尝试匹配开头是 /、结尾是 / 的字符串
✅ 正确： → 等效于 ^[0-9]{6}$，且更安全
⚠️ 注意：^ 和 $ 可写可不写，写了不报错但冗余；若写了，也别加 /，比如 pattern="^[a-z]+$" 是合法的

字符类 [] 里 - 和转义必须小心

在 [] 中，- 是范围连接符（如 a-z），放中间就可能被当成非法 Unicode 范围；多数符号在字符类内本就不具元字符意义，乱加反而触发“identity escape”错误。

❌ 错误：[a-z-_] → 解析为 z 到 _ 的非法范围
✅ 正确：[a-z_-] 或 [-a-z_] → - 放末尾或开头即视为字面短横线
❌ 错误：[.+*] → .、+、* 在 [] 内无特殊含义，. 属于非法转义
✅ 正确：[.+*]（直接写）；但 [、]、^（在开头）、本身仍需转义，如 [[]^\]

哪些 type 支持 pattern？number 和 date 不行

pattern 只对 text、search、url、tel、email、password 这六种类型生效；number、date、checkbox 等用了也完全忽略。

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

type="tel"：原生无格式校验，pattern 是唯一可控手段，例如 pattern="+?[1-9]d{1,14}"（E.164）
type="email"：自带基础检查，pattern 是叠加校验，比如 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" 可限制域名后缀小写
type="number"：完全无视 pattern，它的校验逻辑独立（靠 min/max/step）
移动端软键盘不会因 pattern 自动切换，想调数字键盘请用 inputmode="numeric" 或 type="tel"

没反应？大概率是缺 required 或没触发验证时机

pattern 默认允许空值通过——除非你加了 required，或者用户输入了内容但不匹配。它也不会主动提示，错误气泡只在 submit 或手动调用 reportValidity() 时出现。

常见静默失败原因：没加 required，且用户留空；或用户输错后没再次提交
要实时反馈，得监听 input 或 blur 并手动调用：input.checkValidity()（返回布尔）或 input.reportValidity()（弹气泡）
title 不是可选项：没设 title 时，Chrome/Firefox 显示“请与所要求的格式匹配”，毫无指导性
错误文案不可定制，但可用 setCustomValidity("xxx") 覆盖；注意每次输入后必须显式设为空字符串清空状态