HTML formalarini tekshirish

JavaScript yordamida formani tekshirish

HTML formalarini tekshirish JavaScript yordamida amalga oshirilishi mumkin. Agar forma maydoni (masalan, fname) bo'sh bo'lsa, ushbu funksiya xabar (alert) chiqaradi va formaning yuborilishini oldini olish uchun false qaytaradi:

function validateForm() {
  let x = document.forms['myForm']['fname'].value
  if (x == '') {
    alert("Ism to'ldirilishi shart")
    return false
  }
}

Funksiya forma yuborilganda (onsubmit) chaqirilishi mumkin:

<form
  name="myForm"
  action="/action_page.php"
  onsubmit="return validateForm()"
  method="post"
>
  Ism: <input type="text" name="fname" />
  <input type="submit" value="Yuborish" />
</form>

---

JavaScript raqamli kiritishni tekshira oladi

JavaScript ko'pincha raqamli kiritishni tekshirish uchun ishlatiladi:

<p>Iltimos, 1 dan 10 gacha son kiriting</p>
<input id="numb" type="text" />
<button type="button" onclick="myFunction()">Yuborish</button>
<p id="demo"></p>

<script>
  function myFunction() {
    let x = document.getElementById('numb').value
    let text
    if (isNaN(x) || x < 1 || x > 10) {
      text = "Kiritilgan ma'lumot noto'g'ri"
    } else {
      text = "Kiritilgan ma'lumot to'g'ri"
    }
    document.getElementById('demo').innerHTML = text
  }
</script>

---

Avtomatik HTML formalarini tekshirish

HTML formalarini tekshirish brauzer tomonidan avtomatik ravishda amalga oshirilishi mumkin. Agar forma maydoni bo'sh bo'lsa, required atributi ushbu formaning yuborilishini oldini oladi (Internet Explorer 9 va undan oldingi versiyalarda ishlamaydi):

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required />
  <input type="submit" value="Yuborish" />
</form>

---

Ma'lumotlarni tekshirish (Data Validation)

Ma'lumotlarni tekshirish — foydalanuvchi kiritgan ma'lumotlarning toza, to'g'ri va foydali ekanligini ta'minlash jarayonidir. Odatiy tekshirish vazifalari:

• Foydalanuvchi barcha kerakli maydonlarni to'ldirdimi?
• Foydalanuvchi to'g'ri sana kiritdimi?
• Foydalanuvchi raqamli maydon xususiyatiga matn kiritdimi?

Ko'pincha, ma'lumotlarni tekshirishning maqsadi foydalanuvchidan to'g'ri ma'lumot olishni ta'minlashdir.

Server tomonida tekshirish (Server-side validation) ma'lumotlar serverga yuborilgandan so'ng veb-server tomonidan amalga oshiriladi. Mijoz tomonida tekshirish (Client-side validation) ma'lumotlar serverga yuborilishidan oldin veb-brauzer tomonidan amalga oshiriladi.

---

HTML Constraint Validation

HTML5 constraint validation (cheklash orqali tekshirish) deb nomlangan yangi tekshirish konsepsiyasini joriy qildi. U quyidagilarga asoslangan:

• Cheklashlarni tekshirish HTML kirish atributlari
• Cheklashlarni tekshirish CSS soxta (pseudo) selektorlari
• Cheklashlarni tekshirish DOM xususiyatlari va metodlari

HTML kirish atributlari

Atribut	Tavsif
disabled	Kirish elementi o'chirilgan bo'lishi kerakligini bildiradi
max	Kirish elementining maksimal qiymatini bildiradi
min	Kirish elementining minimal qiymatini bildiradi
pattern	Kirish elementining qiymat naqshini (RE) bildiradi
required	Kirish maydonini to'ldirish shartligini bildiradi
type	Kirish elementining turini bildiradi

CSS soxta (pseudo) selektorlari

Selektor	Tavsif
:disabled	disabled atributi ko'rsatilgan elementlarni tanlaydi
:invalid	Noto'g'ri qiymatli elementlarni tanlaydi
:optional	required atributi ko'rsatilmagan elementlarni tanlaydi
:required	required atributi ko'rsatilgan elementlarni tanlaydi
:valid	To'g'ri qiymatli elementlarni tanlaydi