ValidityState: patternMismatch 屬性
ValidityState 介面中只讀的 patternMismatch 屬性指示使用者編輯後的 <input> 元素的值是否不符合元素 pattern 屬性設定的約束。
僅當以下條件全部為真時，patternMismatch 屬性才為 true：
值
一個布林值，如果 ValidityState 物件不符合約束，則為 true。
示例
給定以下內容
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。當為 true 時，該元素將匹配 :invalid CSS 偽類。
css
input:invalid {
border: red solid 3px;
}
請注意，在這種情況下，如果值太長或太短，我們會得到一個 patternMismatch，而不是 validityState.tooLong 或 validityState.tooShort，因為是 pattern 決定了值的長度。如果我們改用 minlength 和 maxlength 屬性，我們可能會看到 validityState.tooLong 或 validityState.tooShort 為 true。
注意： email 輸入型別至少需要匹配 x@y，而 url 型別至少需要匹配 x:，且沒有 pattern 屬性。當無效時，如果不存在 pattern 屬性（或 pattern 屬性對於該輸入型別無效），則 validityState.typeMismatch 將為 true。
規範
| 規範 |
|---|
| HTML # dom-validitystate-patternmismatch |
瀏覽器相容性
載入中…