JavaScript API Kiểm tra

Phương thức và thuộc tính kiểm tra xác nhận DOM.

Phương thức

Phương thức mô tả
checkValidity() Nếu phần tử input chứa dữ liệu hợp lệ, sẽ trả về true.
setCustomValidity() Đặt thuộc tính validationMessage của phần tử input.

thuộc tính

thuộc tính mô tả
validity Chứa thuộc tính布尔 liên quan đến tính hợp lệ của phần tử input.
validationMessage Chứa thông báo mà trình duyệt sẽ hiển thị khi tính hợp lệ là giả.
willValidate Chỉ thị có nên kiểm tra phần tử input không.

Mẫu - phương thức checkValidity()

Nếu trường dữ liệu nhập chứa dữ liệu không hợp lệ, sẽ hiển thị một thông báo:

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Thử trực tiếp

thuộc tính hợp lệ

phần tử inputthuộc tính hợp lệchứa nhiều thuộc tính liên quan đến tính hợp lệ của dữ liệu:

thuộc tính mô tả
lỗi tùy chỉnh Nếu đã đặt thông báo有效性 tùy chỉnh, thì đặt thành true.
không khớp mẫu Nếu giá trị của phần tử không khớp với thuộc tính pattern, thì đặt thành true.
rangeOverflow Nếu giá trị của phần tử lớn hơn thuộc tính max, thì đặt thành true.
rangeUnderflow Nếu giá trị của phần tử nhỏ hơn thuộc tính min, thì đặt thành true.
không khớp bước Nếu giá trị của phần tử không hợp lệ dựa trên thuộc tính step, thì đặt thành true.
quá dài Nếu giá trị của phần tử vượt quá thuộc tính maxLength, thì đặt thành true.
không khớp loại Nếu giá trị của phần tử không hợp lệ dựa trên thuộc tính type, thì đặt thành true.
thiếu giá trị Nếu phần tử (có thuộc tính required) không có giá trị, thì đặt thành true.
hợp lệ Nếu giá trị của phần tử hợp lệ, thì đặt thành true.

ví dụ

thuộc tính rangeOverflow

Nếu số trong trường input lớn hơn 100 (input của max Nếu thuộc tính), thì hiển thị một thông báo:

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Giá trị OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Giá trị quá lớn";
  }
}
</script>

Thử trực tiếp

thuộc tính rangeUnderflow

Nếu số trong trường input lớn hơn 100 (input của max Nếu thuộc tính), thì hiển thị một thông báo:

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = = "Giá trị OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Giá trị quá nhỏ";
  }
}
</script>

Thử trực tiếp