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 上檢視此頁面 • 報告此內容的問題