HTML5 pattern属性用于前端表单正则校验，如[A-HJ-NP-Z2-9]{8}匹配8位不含O/I/0/1的优惠码，需搭配type="text"和required，并用title提供提示，但不替代后端验证。

HTML5 的 pattern 属性可直接在表单输入中声明正则表达式，用于前端轻量级格式校验——它不替代后端验证，但能即时提示用户输入是否符合优惠券码的预设规则。

明确优惠券码的常见格式特征

实际业务中，优惠券码往往有固定结构，例如：

• 全大写字母 + 数字组合（如 SAVE2024 或 DISC-7X9B）
• 固定长度（如 8 位或 10 位）
• 含分隔符（如 ABC-DEF-GHI，每组3位，中间用短横线连接）
• 排除易混淆字符（如不使用 O、I、0、1，避免用户看错）

写出匹配该格式的正则表达式

pattern 的值就是标准 JavaScript 正则（无需斜杠包裹），注意锚定首尾以确保**完全匹配**：

• 8位大写字母+数字（不含 O/I/0/1）：[A-HJ-NP-Z2-9]{8}
• 10位，前4位字母+后6位数字：[A-Z]{4}\d{6}
• 三段式带短横线（如 ABC-DE-FG）：[A-Z]{3}-[A-Z]{2}-[A-Z]{2}
• 不区分大小写且允许空格（提交前由 JS 清洗）：[a-zA-Z0-9\s]{6,12}（建议配合 oninput 去空格）

⚠️ 注意：pattern 默认不启用全局或忽略大小写标志，如需忽略大小写，可加 title 提示，并在 JS 中统一转大写处理。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

在 input 标签中正确使用 pattern 属性

必须搭配 type="text"（或 type="tel" 等文本型）和 required（否则空值也能通过），同时设置 title 给出友好提示：

<input 
  type="text" 
  name="coupon" 
  pattern="[A-HJ-NP-Z2-9]{8}" 
  title="请输入8位有效优惠码（不包含O、I、0、1）" 
  required>

当用户输入不符合时，浏览器会显示 title 内容作为原生提示（Chrome/Safari/Firefox 均支持），无需额外 JS。

补充：pattern 无法覆盖的场景需用 JS 增强

pattern 仅做格式校验，不检查码是否真实存在或已使用。必要时应：

• 监听 input 或 blur 事件，实时调用 API 验证有效性
• 提交前用 JS 调用 checkValidity() 主动触发校验，并自定义错误消息
• 对用户粘贴内容做清洗（如自动转大写、去除空格）：input.addEventListener('input', e => e.target.value = e.target.value.toUpperCase().replace(/\s/g, ''))