ValidityState: thuộc tính patternMismatch
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc patternMismatch của giao diện ValidityState chỉ ra liệu giá trị của <input>, sau khi đã được người dùng chỉnh sửa, có tuân theo các ràng buộc được đặt bởi thuộc tính pattern của phần tử hay không.
Thuộc tính patternMismatch sẽ là true khi và chỉ khi tất cả các điều kiện sau đây đều đúng:
Giá trị
Một giá trị boolean là true nếu đối tượng ValidityState không tuân theo các ràng buộc.
Ví dụ
Cho những đầu vào sau:
<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>
Đây chúng ta có 3 phần cho số điện thoại Bắc Mỹ với nhãn ngầm bao gồm cả ba thành phần của số điện thoại, kỳ vọng lần lượt là 3 chữ số, 3 chữ số và 4 chữ số, như được xác định bởi thuộc tính pattern được đặt trên mỗi trường.
Nếu các giá trị quá dài hoặc quá ngắn, hoặc chứa các ký tự không phải chữ số, patternMismatch sẽ là true. Khi true, phần tử khớp với các lớp giả CSS :invalid.
input:invalid {
border: red solid 3px;
}
Lưu ý, trong trường hợp này, chúng ta nhận được patternMismatch chứ không phải validityState.tooLong hoặc validityState.tooShort nếu các giá trị quá dài hoặc quá ngắn vì chính pattern đang xác đ���nh độ dài của giá trị. Nếu thay vào đó chúng ta dùng thuộc tính minlength và maxlength, chúng ta có thể thấy validityState.tooLong hoặc validityState.tooShort là true.
Note:
Kiểu đầu vào email yêu cầu tối thiểu khớp với x@y và kiểu url yêu cầu tối thiểu khớp với x:, không có thuộc tính pattern nào. Khi không hợp lệ, validityState.typeMismatch sẽ là true, nếu không có thuộc tính pattern (hoặc thuộc tính pattern không hợp lệ cho kiểu đầu vào đó).
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # dom-validitystate-patternmismatch |