HTML / Form баталгаажуулалт (validation)

Form баталгаажуулалт (validation)

Хэрэглэгч form бөглөхдөө буруу өгөгдөл оруулах нь байнга тохиолддог — и-мэйл хаяг дутуу, нууц үг хэт богино, тоо хязгаараас давсан гэх мэт. HTML5 нь JavaScript бичихгүйгээр браузерийн түвшинд эдгээрийг шалгах validation attribute-уудтай.

required — заавал бөглөх

html
<form>
  <label for="нэр">Нэр</label>
  <input type="text" id="нэр" name="name" required />

  <label for="и-мэйл">И-мэйл</label>
  <input type="email" id="и-мэйл" name="email" required />

  <button type="submit">Илгээх</button>
</form>

required attribute байвал хоосон орхиод form илгээхийг оролдоход браузер автоматаар алдааны мессеж харуулна.

type — форматын шалгалт

html
<!-- И-мэйл формат автоматаар шалгагдана -->
<input type="email" name="email" required />

<!-- URL формат шалгагдана — https:// шаардна -->
<input type="url" name="website" />

<!-- Зөвхөн тоо оруулах боломжтой -->
<input type="number" name="age" />

<!-- Утасны дугаар -->
<input type="tel" name="phone" />

type="email" нь @ тэмдэгт болон домэйн байгаа эсэхийг шалгана. Гэхдээ и-мэйл үнэхээр оршин байгаа эсэхийг шалгадаггүй — энэ нь серверийн ажил.

minlength ба maxlength — текстийн урт

html
<!-- Хэрэглэгчийн нэр: 2–50 тэмдэгт -->
<input
  type="text"
  name="username"
  minlength="2"
  maxlength="50"
  required
/>

<!-- Нууц үг: хамгийн багадаа 8 тэмдэгт -->
<input
  type="password"
  name="password"
  minlength="8"
  required
/>

<!-- Тайлбар: 500 тэмдэгтээс хэтрэхгүй -->
<textarea name="bio" maxlength="500"></textarea>

min ба max — тооны хязгаар

html
<!-- Нас: 18–120 -->
<input type="number" name="age" min="18" max="120" />

<!-- Үнэлгээ: 1–5 -->
<input type="number" name="rating" min="1" max="5" step="1" />

<!-- Огноо: 2024 оноос хойш -->
<input type="date" name="birthdate" max="2024-12-31" />

<!-- Хувь: 0.0–100.0 -->
<input type="number" name="percent" min="0" max="100" step="0.1" />

step attribute нь утга хэдээр нэмэгдэх/хасагдахыг заана.

pattern — regex загвар

pattern attribute нь regular expression (regex) ашиглан өгөгдлийн хэлбэрийг шалгана:

html
<!-- Монгол утасны дугаар: 8 оронтой тоо -->
<label for="утас">Утасны дугаар</label>
<input
  type="tel"
  id="утас"
  name="phone"
  pattern="[0-9]{8}"
  placeholder="88001234"
  title="8 оронтой утасны дугаар оруулна уу"
  required
/>

<!-- Нууц үг: үсэг болон тоо заавал агуулсан, 8+ тэмдэгт -->
<input
  type="password"
  name="password"
  pattern="(?=.*[A-Za-z])(?=.*\d).{8,}"
  title="Үсэг болон тоо хоёуланг агуулсан, 8-аас дээш тэмдэгт"
  required
/>

<!-- Зөвхөн латин үсэг, тоо, доогуур зураас -->
<input
  type="text"
  name="username"
  pattern="[A-Za-z0-9_]+"
  title="Зөвхөн латин үсэг, тоо, _ тэмдэгт ашиглах боломжтой"
/>

title attribute нь validation алдааны мессежийг өгдөг — хэрэглэгчид ойлгомжтой байх ёстой.

Бүтэн form жишээ

html
<form novalidate id="бүртгэлийн-форм">
  <!-- Нэр -->
  <div>
    <label for="нэр">Нэр *</label>
    <input
      type="text"
      id="нэр"
      name="name"
      minlength="2"
      maxlength="50"
      required
    />
  </div>

  <!-- И-мэйл -->
  <div>
    <label for="и-мэйл">И-мэйл *</label>
    <input
      type="email"
      id="и-мэйл"
      name="email"
      required
    />
  </div>

  <!-- Нууц үг -->
  <div>
    <label for="нууц-үг">Нууц үг *</label>
    <input
      type="password"
      id="нууц-үг"
      name="password"
      minlength="8"
      pattern="(?=.*[A-Za-z])(?=.*\d).{8,}"
      title="Үсэг болон тоо хоёуланг агуулсан, 8+ тэмдэгт"
      required
    />
  </div>

  <!-- Нас -->
  <div>
    <label for="нас">Нас</label>
    <input
      type="number"
      id="нас"
      name="age"
      min="14"
      max="120"
    />
  </div>

  <button type="submit">Бүртгүүлэх</button>
</form>

Browser validation vs server validation

Browser validation (HTML attribute-уудаар):

  • JavaScript шаардахгүй, хурдан
  • Хэрэглэгчид шуурхай мэдэгдэл өгдөг
  • Найдвартай биш — хэрэглэгч HTML-г өөрчилж эсвэл шууд HTTP хүсэлт илгээж bypassed хийж болно

Server validation (backend код):

  • Заавал шаардлагатай — ямар ч тохиолдолд сервер дээр дахин шалгана
  • Мэдээллийн санд хадгалахаас өмнө шалгана
  • И-мэйл давхардсан эсэх зэрэг database-ийн шалгалтыг хийж чадна

Дүгнэлт: Browser validation нь хэрэглэгчийн туршлагыг сайжруулах туслалцаа. Server validation нь заавал байх аюулгүй байдлын хамгаалалт. Хоёуланг хамт ашиглана.

novalidate — браузерийн validation-г унтраах

Хэрэв JavaScript-ээр custom validation хийх бол novalidate attribute нэмж браузерийн default мессежийг унтарна:

html
<form novalidate id="форм">
  <!-- JavaScript-ээр өөрийн validation хийнэ -->
</form>

Дараагийн хичээлд:

Нарийн input төрлүүдийг судлана — search, datetime-local, color, datalist autocomplete зэрэг HTML5-ийн сонирхолтой input-уудыг практикаар үзнэ.

← Өмнөх хичээлCharacter encodingДараах хичээл →Нарийн input төрлүүд