Phê chuẩn API trong JavaScript

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

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 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:

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>