JavaScript үндэс / Маягт ба баталгаажуулалт

Маягт ба баталгаажуулалт

Маягт (form) бол хэрэглэгчтэй харилцах хамгийн нийтлэг арга — нэвтрэх, бүртгүүлэх, хайлт хийх бүгд маягтаар дамждаг. JavaScript-ээр оролтын утгыг авч, зөв эсэхийг шалгаж, алдааг хэрэглэгчид мэдэгдэх аргыг энэ хичээлд үзнэ.

Маягтын утга авах

HTML маягтын input-уудаас утга авахдаа .value ашиглана:

html

<form id="нэвтрэх-маягт">
  <input type="email" id="и-мэйл" />
  <input type="password" id="нууц-үг" />
  <button type="submit">Нэвтрэх</button>
</form>

javascript

const маягт = document.querySelector("#нэвтрэх-маягт");

маягт.addEventListener("submit", (event) => {
  event.preventDefault(); // Хуудас шинэчлэгдэхийг зогсоох

  const и_мэйл = document.querySelector("#и-мэйл").value;
  const нууц_үг = document.querySelector("#нууц-үг").value;

  console.log("И-мэйл:", и_мэйл);
  console.log("Нууц үг:", нууц_үг);
});

event.preventDefault() заавал байх ёстой — энгүй бол маягт илгээгдэхэд хуудас дахин ачаалагдана.

Оролтын утга шалгах

Хэрэглэгчийн оруулсан утгыг серверт илгээхээсээ өмнө JavaScript-ээр шалгана. Үүнийг client-side validation гэнэ:

javascript

function и_мэйл шалгах(и_мэйл) {
  if (и_мэйл.trim() === "") {
    return "И-мэйл хаяг оруулна уу";
  }
  if (!и_мэйл.includes("@")) {
    return "И-мэйл хаяг буруу байна";
  }
  return null; // Алдаагүй
}

function нууц_үг шалгах(нууц_үг) {
  if (нууц_үг.length < 8) {
    return "Нууц үг 8-аас дээш тэмдэгт байх ёстой";
  }
  return null;
}

Алдаа байвал мэдэгдлийн текст буцаана, байхгүй бол null — энгийн дүрэм.

Алдааны мэдэгдэл харуулах

Шалгасны дараа алдааг хэрэглэгчид харуулна. Input-ын доор алдааны элемент байгаа гэж үзье:

javascript

function алдаа харуулах(оролт, мэдэгдэл) {
  const алдааны элемент = оролт.parentElement.querySelector(".алдаа");

  if (мэдэгдэл) {
    алдааны элемент.textContent = мэдэгдэл;
    алдааны элемент.hidden = false;
    оролт.classList.add("алдаатай");
  } else {
    алдааны элемент.textContent = "";
    алдааны элемент.hidden = true;
    оролт.classList.remove("алдаатай");
  }
}

маягт.addEventListener("submit", (event) => {
  event.preventDefault();

  const и_мэйл талбар = document.querySelector("#и-мэйл");
  const нууц_үг талбар = document.querySelector("#нууц-үг");

  const и_мэйл алдаа = и_мэйл шалгах(и_мэйл талбар.value);
  const нууц_үг алдаа = нууц_үг шалгах(нууц_үг талбар.value);

  алдаа харуулах(и_мэйл талбар, и_мэйл алдаа);
  алдаа харуулах(нууц_үг талбар, нууц_үг алдаа);

  if (!и_мэйл алдаа && !нууц_үг алдаа) {
    console.log("Маягт зөв байна — илгээж байна...");
  }
});

Бодит цагийн шалгалт

Маягт илгээхийг хүлээлгүй хэрэглэгч бичиж байхад шалгаж болно — input event ашиглана:

javascript

const и_мэйл оролт = document.querySelector("#и-мэйл");

и_мэйл оролт.addEventListener("input", (event) => {
  const алдаа = и_мэйл шалгах(event.target.value);
  алдаа харуулах(и_мэйл оролт, алдаа);
});

Хэрэглэгч бичих бүрт шалгаж, шууд хариу өгнө — хэрэглэгчийн туршлагыг сайжруулдаг арга.

checkbox ба select

Бусад оролтын төрлүүдтэй ажиллах:

javascript

// checkbox — .checked ашиглана
const зөвшөөрөл = document.querySelector("#зөвшөөрөл");
console.log(зөвшөөрөл.checked); // true эсвэл false

// select — .value ашиглана
const хот сонгох = document.querySelector("#хот");
console.log(хот сонгох.value); // Сонгосон утга

хот сонгох.addEventListener("change", (event) => {
  console.log("Сонгосон хот:", event.target.value);
});

Маягт цэвэрлэх

Илгээсний дараа оролтуудыг хоосон болгох:

javascript

function маягт цэвэрлэх() {
  document.querySelector("#и-мэйл").value = "";
  document.querySelector("#нууц-үг").value = "";
}

// Эсвэл бүх оролтыг нэг дор
маягт.reset();

маягт.reset() нь бүх оролтыг HTML-дхаа анхны утгад нь буцаана.

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

LocalStorage ба SessionStorage — хэрэглэгчийн өгөгдлийг хөтчид хадгалах арга. Сервергүйгээр ч хэрэглэгчийн тохиргоо, сагсны мэдээлэл зэргийг санах боломжтой болно.

← Өмнөх хичээлҮйл явдал (Events)Дараах хичээл →LocalStorage ба SessionStorage