HTML formalarni validatsiya qilish qanday ishlaydi?

Savol

HTML formalarda qanday o'rnatilgan validatsiya mexanizmlari mavjud?

Qisqa javob

Brauzer formalarni bironta ham JavaScript qatorisiz validatsiya qila oladi: required, pattern, min/max atributlari, maxsus input turlari (email, number, url) va :valid/:invalid CSS-psevdoklasslari orqali.

Batafsil javob

• required — maydon to'ldirilishi shart.
• type="email" | "number" | "url" | "tel" — brauzer formatni o'zi tekshiradi.
• pattern="regex" — muntazam ifoda bo'yicha validatsiya.
• minlength / maxlength, min / max — uzunlik/oraliq cheklovlari.
• <form>dagi novalidate o'rnatilgan validatsiyani o'chiradi (validatsiyani JS/freymvork bajarganda foydali).
• :valid, :invalid, :required, :optional psevdoklasslari maydonlarni holatiga qarab stillashga imkon beradi.
• JS API: element.checkValidity(), element.reportValidity(), element.setCustomValidity('xato matni').

O'rnatilgan validatsiya oddiy holatlar uchun qulay, lekin murakkab biznes-mantiq uchun (masalan, "parollar mos kelishi kerak") odatda JavaScript kerak bo'ladi.

Misol

<form novalidate>
  <input
    type="email"
    required
    placeholder="Email"
  />
  <input
    type="password"
    minlength="8"
    pattern="(?=.*\d)(?=.*[a-z]).{8,}"
    required
    title="Kamida 8 belgi, raqamni ham o'z ichiga olgan holda"
  />
  <button type="submit">Kirish</button>
</form>

input:invalid {
  border-color: red;
}

Qo'shimcha savollar

• checkValidity() reportValidity()dan nimasi bilan farq qiladi?
• Xato haqida maxsus xabarni qanday yasash mumkin?
• Klient validatsiyasini serverda ham takrorlash kerakmi?