HTML 属性：pattern

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

试一试

<label for="username">Username: (3-16 characters)</label>
<input
  id="username"
  name="username"
  type="text"
  value="Sasha"
  pattern="\w{3,16}"
  required />

<label for="pin">PIN: (4 digits)</label>
<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />

label {
  display: block;
  margin-top: 1em;
}

input:valid {
  background-color: palegreen;
}

input:invalid {
  background-color: lightpink;
}

概述

pattern属性是以下text、tel、email、url、password和search输入类型的属性。

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

该模式的正则表达式用 'v' 标志进行编译。这使得正则表达式支持 Unicode，并且还改变了字符类的解释方式。这允许字符类集合的交集和减法操作，此外，除了 ] 和 \，如果以下字符表示字面字符，则必须使用 \ 反斜杠进行转义：(、)、[、{、}、/、-、|。在 2023 年年中之前，指定的是 'u' 标志；如果您正在更新旧代码，请阅读 unicodeSets 参考。

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

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

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

约束验证

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

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

可用性和可访问性考量

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

不鼓励仅仅依赖title属性来显示文本内容，因为许多用户代理没有以可访问的方式公开该属性。尽管有些浏览器在悬停带有标题的元素时会显示工具提示，但这会遗漏仅使用键盘和仅使用触摸的用户。这是您必须包含信息以告知用户如何填写控件以满足要求的几个原因之一。

虽然某些浏览器使用 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 位和 4 位数字，如每个部分上设置的 pattern 属性所定义。

如果值过长或过短，或者包含非数字字符，则 patternMismatch 将为 true。当为 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>

div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

渲染效果如下：

规范

规范
HTML # attr-input-pattern

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后修改于2025年8月13日，由MDN贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题