ValidityState: thuộc tính typeMismatch
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 typeMismatch 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 type của phần tử hay không.
Nếu thuộc tính type kỳ vọng các chuỗi cụ thể, chẳng hạn như các kiểu email và url và giá trị không tuân theo các ràng buộc được đặt bởi kiểu, thuộc tính typeMismatch sẽ là true.
Kiểu đầu vào email kỳ vọng một hoặc nhiều địa chỉ email hợp lệ, tùy thuộc vào việc thuộc tính multiple có mặt hay không. Địa chỉ email hợp lệ bao gồm tiền tố email và domain, có hoặc không có domain cấp cao nhất. Nếu giá trị của đầu vào email không phải là chuỗi rỗng, một địa chỉ email hợp lệ duy nhất, hoặc một hoặc nhiều địa chỉ email được phân cách bởi dấu phẩy nếu thuộc tính multiple có mặt, thì có typeMismatch.
Kiểu đầu vào url kỳ vọng một hoặc nhiều URL hợp lệ, tùy thuộc vào việc thuộc tính multiple có mặt hay không. URL hợp lệ bao gồm giao thức, tùy chọn với địa chỉ IP, hoặc kết hợp subdomain, domain, và domain cấp cao nhất tùy chọn. Nếu giá trị của đầu vào URL không phải là chuỗi rỗng, một URL hợp lệ duy nhất, hoặc một hoặc nhiều URL được phân cách bởi dấu phẩy nếu thuộc tính multiple có mặt, thì có typeMismatch.
Giá trị
Một giá trị boolean là true nếu ValidityState không tuân theo các ràng buộc.
Ví dụ
Không khớp kiểu trên phần tử đầu vào
typeMismatch xảy ra khi có sự không khớp giữa value kỳ vọng qua thuộc tính type và dữ liệu thực sự có mặt.
typeMismatch chỉ là một trong nhiều lỗi có thể xảy ra và chỉ liên quan đến các kiểu email và url.
Khi giá trị được cung cấp không khớp với giá trị kỳ vọng dựa trên kiểu cho các kiểu đầu vào khác, bạn sẽ nhận được các lỗi khác nhau.
Ví dụ, nếu giá trị đầu vào number không phải là số dấu phẩy động, badInput là true.
Nếu email là required nhưng trống, valueMissing sẽ là true.
<pre id="log">Validation logged here...</pre>
<p>
<label>
Enter an email address:
<input id="emailInput" type="email" value="example.com" required />
</label>
</p>
input:invalid {
border: red solid 3px;
}
const emailInput = document.getElementById("emailInput");
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText = text;
}
emailInput.addEventListener("input", () => {
emailInput.reportValidity();
if (emailInput.validity.valid) {
log("Input OK…");
} else if (emailInput.validity.typeMismatch) {
log("Input is not an email.");
} else {
log(`Validation failed: ${emailInput.validationMessage}`);
}
});
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-validitystate-typemismatch |
Tương thích trình duyệt
Xem thêm
- Các thuộc tính ValidityState badInput, valid, customError.
- Xác thực ràng buộc
- Biểu mẫu: Xác thực dữ liệu biểu mẫu
- Biểu thức chính quy