Validation API
Cheklovlar asosida tekshirish (Constraint Validation) DOM metodlari va xususiyatlari
| Metod/Xususiyat | Tavsif |
|---|---|
| checkValidity() | Input elementida to‘g‘ri ma’lumot bo‘lsa, true qaytaradi. |
| setCustomValidity() | Input elementining validationMessage xususiyatini o‘rnatadi. |
| Xususiyat | Tavsif |
| validity | Input elementining yaroqliligiga oid boolean xususiyatlarni o‘z ichiga oladi. |
| validationMessage | Yaroqlilik false bo‘lganda brauzer ko‘rsatadigan xabarni o‘z ichiga oladi. |
| willValidate | Input elementi tekshirilishi yoki tekshirilmasligini bildiradi. |
Agar input maydonida noto‘g‘ri ma’lumot bo‘lsa, xabar chiqaring:
checkValidity() metodi
<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>
O‘zingiz sinab ko‘ring »
Yaroqlilik xususiyatlari
Input elementining validity xususiyati ma’lumotlarning yaroqliligiga oid bir qancha xususiyatlarni o‘z ichiga oladi:
| Xususiyat | Tavsif |
|---|---|
| customError | Maxsus yaroqlilik xabari o‘rnatilgan bo‘lsa, true qiymatini oladi. |
| patternMismatch | Element qiymati uning pattern atributiga mos kelmasa, true qiymatini oladi. |
| rangeOverflow | Element qiymati uning max atributidan katta bo‘lsa, true qiymatini oladi. |
| rangeUnderflow | Element qiymati uning min atributidan kichik bo‘lsa, true qiymatini oladi. |
| stepMismatch | Element qiymati uning step atributiga ko‘ra noto‘g‘ri bo‘lsa, true qiymatini oladi. |
| tooLong | Element qiymati uning maxLength atributidan oshib ketsa, true qiymatini oladi. |
| typeMismatch | Element qiymati uning type atributiga ko‘ra noto‘g‘ri bo‘lsa, true qiymatini oladi. |
| valueMissing | required atributiga ega elementda qiymat bo‘lmasa, true qiymatini oladi. |
| valid | Element qiymati to‘g‘ri bo‘lsa, true qiymatini oladi. |
Misollar
Agar input maydonidagi son 100 dan katta bo‘lsa (inputning max atributi), xabar chiqaring:
rangeOverflow xususiyati
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
}
}
</script>
O‘zingiz sinab ko‘ring »
Agar input maydonidagi son 100 dan kichik bo‘lsa (inputning min atributi), xabar chiqaring:
rangeUnderflow xususiyati
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = = "Value OK";
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "Value too small";
}
}
</script>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!