Phê chuẩn API trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Phê chuẩn API trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Các phương thức xác minh hạn chế DOM

Thuộc tính Mô tả
checkValidity() Trả về true nếu một phần tử đầu vào chứa dữ liệu hợp lệ.
setCustomValidity() Thiết lập thuộc tính validationMessage của một phần tử đầu vào.

Nếu trường đầu vào chứa dữ liệu không hợp lệ, thông báo sẽ được hiển thị:

Phương thức checkValidity()

<input id=”id1″ type=”number” min=”100″ max=”300″ required>
<button onclick=”myFunction()”>OK</button>

<p id=”demo”></p>

<script>
function myFunction() {
var inpObj = document.getElementById(“id1”);
if (inpObj.checkValidity() == false) {
document.getElementById(“demo”).innerHTML = inpObj.validationMessage;
}
}
</script>

Kiểm tra tính hợp lệ của thuộc tính DOM

Thuộc tính Mô tả
validity Chứa các thuộc tính boolean liên quan đến tính hợp lệ của một phần tử đầu vào.
validationMessage Chứa thông báo một trình duyệt sẽ hiển thị khi hiệu lực là sai.
willValidate Cho biết nếu một phần tử đầu vào được xác nhận.

Thuộc tính Validity

Thuộc tính validity của một phần tử đầu vào chứa một số thuộc tính liên quan đến tính hợp lệ của dữ liệu:

Thuộc tính Mô tả
customError Đặt true, nếu một thông báo giá trị tùy chỉnh được đặt.
patternMismatch Đặt true, nếu giá trị của một phần tử không khớp với thuộc tính kiểu của nó.
rangeOverflow Đặt true, nếu giá trị của một phần tử lớn hơn thuộc tính max của nó.
rangeUnderflow Đặt true, nếu giá trị của một phần tử nhỏ hơn thuộc tính min của nó.
stepMismatch Đặt true, nếu giá trị của một phần tử không hợp lệ cho mỗi thuộc tính step của nó
tooLong Đặt true, nếu giá trị của một phần tử vượt quá thuộc tính maxLength của nó.
typeMismatch Đặt true, nếu giá trị của một phần tử không hợp lệ cho thuộc tính types của nó.
valueMissing Đặt true, nếu một phần tử (có thuộc tính bắt buộc) không có giá trị.
valid Đặt true, nếu giá trị của một phần tử là hợp lệ.

Ví dụ:

Nếu số trong trường đầu vào lớn hơn 100 (thuộc tính tối đa của đầu vào), thông báo sẽ được hiển thị.

Thuộc tính rangeOverflow

<input id=”id1″ type=”number” max=”100″>
<button onclick=”myFunction()”>OK</button>

<p id=”demo”></p>

<script>
function myFunction() {
var txt = “”;
if (document.getElementById(“id1”).validity.rangeOverflow) {
txt = “Value too large”;
}
document.getElementById(“demo”).innerHTML = txt;
}
</script>

Nếu số trong trường đầu vào nhỏ hơn 100 (thuộc tính min của đầu vào), thông báo sẽ được hiển thị:

Thuộc tính rangeUnderflow

<input id=”id1″ type=”number” min=”100″>
<button onclick=”myFunction()”>OK</button>

<p id=”demo”></p>

<script>
function myFunction() {
var txt = “”;
if (document.getElementById(“id1”).validity.rangeUnderflow) {
txt = “Value too small”;
}
document.getElementById(“demo”).innerHTML = txt;
}
</script>