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 表格僅在瀏覽器中載入

另請參閱