HTML 属性：pattern

pattern 属性指定表单控件的值应匹配的正则表达式。如果非 null 值不符合 pattern 值设置的约束，则 ValidityState 对象的只读 patternMismatch 属性将为 true。

试试看

概述

pattern 属性是 文本、电话、电子邮件、URL、密码 和 搜索 输入类型的属性。

指定 pattern 属性时，它是一个正则表达式，输入的 value 必须与此正则表达式匹配，才能通过 约束验证。它必须是一个有效的 JavaScript 正则表达式，如 RegExp 类型中所用，以及在我们的 正则表达式指南 中所述。

模式的正则表达式使用 'v' 标志 进行编译。这使得正则表达式 支持 Unicode，并更改字符类的解释方式。这允许字符类集交集和减法运算，此外 ] 和 \ 之外，如果以下字符表示字面字符，则必须使用 \ 反斜杠对其进行转义：(、)、[、{、}、/、-、|。在 2023 年年中之前，指定了 'u' 标志；如果你正在更新旧代码，本文档概述了差异。

模式的正则表达式必须与整个输入的 value 匹配，而不是与子字符串匹配 - 就像在模式的开头隐含了 ^(?: 并在结尾隐含了 )$ 一样。

模式文本周围不应指定正斜杠。如果属性值不存在、为空字符串或无效，则不应用任何正则表达式。

一些支持 pattern 属性的输入类型，特别是 电子邮件 和 URL 输入类型，具有必须匹配的预期值语法。如果 pattern 属性不存在，并且值与该值类型的预期语法不匹配，则 ValidityState 对象的只读 typeMismatch 属性将为 true。

约束验证

如果输入的值不是空字符串，并且该值与整个正则表达式不匹配，则 ValidityState 对象的 patternMismatch 属性为 true 将报告约束违规。

注意：如果指定了 pattern 属性但没有值，则其值隐式为空字符串。因此，任何非空输入 value 都会导致约束违规。

可用性和可访问性注意事项

包含 pattern 时，请在控件附近的可视文本中提供模式的描述。此外，请包含一个 title 属性，该属性提供模式的描述。用户代理可能会在约束验证期间使用标题内容来告诉用户模式不匹配。一些浏览器会显示带有标题内容的工具提示，从而提高有视力用户的可用性。此外，辅助技术可能会在控件获得焦点时大声朗读标题，但这不应该依赖于可访问性。

仅依赖 title 属性来显示文本内容是不鼓励的，因为许多用户代理不会以可访问的方式公开该属性。尽管某些浏览器在将鼠标悬停在具有标题的元素上时会显示工具提示，但这忽略了仅键盘和仅触摸的用户。这是你需要包含信息以告知用户如何填写控件以匹配要求的几个原因之一。

虽然 title 被一些浏览器用于填充错误消息，但由于浏览器有时也会在悬停时将标题显示为文本，因此它在非错误情况下也会显示，因此请注意不要将标题措辞为错误已发生。

示例

匹配电话号码

给出以下内容

html
<p>
  <label>
    Enter your phone number in the format (123) - 456 - 7890 (<input
      name="tel1"
      type="tel"
      pattern="[0-9]{3}"
      placeholder="###"
      aria-label="3-digit area code"
      size="2" />) -
    <input
      name="tel2"
      type="tel"
      pattern="[0-9]{3}"
      placeholder="###"
      aria-label="3-digit prefix"
      size="2" />
    -
    <input
      name="tel3"
      type="tel"
      pattern="[0-9]{4}"
      placeholder="####"
      aria-label="4-digit number"
      size="3" />
  </label>
</p>

这里我们有 3 个部分用于北美电话号码，其中包含一个隐式标签，涵盖电话号码的所有三个组成部分，分别期望 3 位数字、3 位数字和 4 位数字，如每个部分上设置的 pattern 属性所定义。

如果值过长或过短，或者包含非数字字符，则 patternMismatch 将为真。当为 true 时，元素匹配 :invalid CSS 伪类。

css
input:invalid {
  border: red solid 3px;
}

如果我们使用的是 minlength 和 maxlength 属性，我们可能会看到 validityState.tooLong 或 validityState.tooShort 为真。

指定模式

您可以使用 pattern 属性来指定一个正则表达式，输入的值必须匹配该正则表达式才能被视为有效（请参阅 根据正则表达式验证，了解使用正则表达式验证输入的简单速成课程）。

以下示例将值限制为 4 到 8 个字符，并要求它仅包含小写字母。

html
<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}"
      title="4 to 8 lowercase letters" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

渲染效果如下

规范

规范
HTML 标准
# attr-input-pattern

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅