JavaScript API xác thực

Xác thực ràng buộc phương pháp DOM

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

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

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() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Thử ngay

Thuộc tính DOM kiểm tra ràng buộc

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 phần tử nhập vào.
validationMessage Chứa thông báo mà trình duyệt sẽ hiển thị khi tính hợp lệ là false.
willValidate Chỉ ra liệu có cần kiểm tra tính hợp lệ của phần tử input hay không.

Thuộc tính hợp lệ

Thuộc tính hợp lệ của phần tử input 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ả
customError Nếu đã thiết lập thông báo hợp lệ tùy chỉnh, thì đặt là true.
patternMismatch Nếu giá trị của phần tử không khớp với thuộc tính pattern của nó, thì đặt là true.
rangeOverflow Nếu giá trị của phần tử lớn hơn thuộc tính max của nó, thì đặt là true.
rangeUnderflow Nếu giá trị của phần tử nhỏ hơn thuộc tính min của nó, thì đặt là true.
stepMismatch Nếu giá trị của phần tử không hợp lệ với thuộc tính step của nó, thì đặt là true.
tooLong Nếu giá trị của phần tử vượt quá thuộc tính maxLength của nó, thì đặt là true.
typeMismatch Nếu giá trị của phần tử không hợp lệ với thuộc tính type của nó, thì đặt là true.
valueMissing Nếu phần tử (có thuộc tính required) không có giá trị, thì đặt là true.
valid Nếu giá trị của phần tử hợp lệ, thì đặt là true.

Mẫu

Nếu số trong trường nhập vào lớn hơn 100 (thuộc tính của phần tử max Nếu thuộc tính này được hiển thị một thông báo:

Thuộc tính rangeOverflow

<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ử ngay

Nếu số trong trường nhập nhỏ hơn 100 (thuộc tính của phần tử min Nếu thuộc tính này được hiển thị một thông báo:

Thuộc tính rangeUnderflow

<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ử ngay