JavaScript formalar bilan ishlash

Forma — foydalanuvchidan ma’lumot oladigan asosiy vosita. JavaScript uni yuborishdan oldin tekshiradi va xatoni darhol ko’rsatadi.

Maydon qiymatini olish

JavaScript

const ism = document.querySelector("#ism").value;
const yosh = document.querySelector("#yosh").value;

console.log(ism, typeof ism);
console.log(yosh, typeof yosh);
console.log(Number(yosh) + 5);

Sahifa

submit hodisasi

JavaScript

const forma = document.querySelector("#forma");

forma.addEventListener("submit", (e) => {
e.preventDefault();
const ism = document.querySelector("#ism").value;
console.log("Yuborildi:", ism);
});

console.log("Ism yozib, Yuborish tugmasini bosing");

Sahifa

e.preventDefault() shart: usiz brauzer sahifani qayta yuklaydi va JavaScript’ingiz bajarilmay qoladi.

Oddiy validatsiya

JavaScript

const forma = document.querySelector("#forma");
const xato = document.querySelector("#xato");

forma.addEventListener("submit", (e) => {
e.preventDefault();
const ism = document.querySelector("#ism").value.trim();

if (ism === "") {
  xato.textContent = "Ism kiritilmadi";
  return;
}
if (ism.length < 3) {
  xato.textContent = "Ism kamida 3 harf bo'lishi kerak";
  return;
}

xato.textContent = "";
console.log("Qabul qilindi:", ism);
});

console.log("Bo'sh, 2 harfli va to'liq ism bilan sinab ko'ring");

Sahifa

trim() matn boshi va oxiridagi bo’shliqlarni olib tashlaydi — foydalanuvchi faqat probel kiritsa ham xato ushlanadi.

return bilan funksiyadan erta chiqish naqshi qulay: har tekshiruv o’z xabarini beradi va keyingisiga o’tmaydi.

Checkbox va select

JavaScript

document.querySelector("#tekshir").addEventListener("click", () => {
const rozi = document.querySelector("#shart").checked;
const shahar = document.querySelector("#shahar").value;

console.log("Rozi:", rozi);
console.log("Shahar:", shahar);
});

console.log("Belgilab, tugmani bosing");

Sahifa

Checkbox uchun value emas, checked ishlatiladi — u true/false qaytaradi.

Radio tugmalar

JavaScript

document.querySelector("#tekshir").addEventListener("click", () => {
const tanlangan = document.querySelector('input[name="daraja"]:checked');
console.log(tanlangan.value);
});

console.log("Tanlab, tugmani bosing");

Sahifa

:checked selektori guruhdan belgilangan tugmani topadi.

Jonli tekshiruv

Foydalanuvchi yozayotganda darhol javob berish:

JavaScript

const parol = document.querySelector("#parol");
const holat = document.querySelector("#holat");

parol.addEventListener("input", () => {
const n = parol.value.length;

if (n === 0) {
  holat.textContent = "";
} else if (n < 6) {
  holat.textContent = "Juda qisqa (" + n + "/6)";
  holat.style.color = "crimson";
} else {
  holat.textContent = "Yetarli";
  holat.style.color = "green";
}
});

console.log("Parol yozib ko'ring");

Sahifa

Amaliy mashq

Ro’yxatdan o’tish formasini yozing:

Ism, email va parol maydonlari bo’lgan forma yasang;
submit da preventDefault chaqiring;
bo’sh maydonlarni tekshirib, xato xabarini ko’rsating;
email ichida @ borligini tekshiring;
parol uzunligini jonli (input hodisasida) tekshiring;
hammasi to’g’ri bo’lsa, ma’lumotni console.log bilan chiqaring.

2-qadamdagi preventDefault ni olib tashlab ko’ring — nima o’zgaradi?

Qisqacha xulosa

input.value maydon qiymatini beradi va u doim matn.
submit hodisasida e.preventDefault() shart.
Checkbox uchun checked, radio uchun :checked selektori.
trim() ortiqcha bo’shliqni olib tashlaydi; erta return tekshiruvni soddalashtiradi.
Brauzerdagi validatsiya server tekshiruvini almashtirmaydi.

Keyingi darsda matn metodlari — string bilan ishlashni ko’ramiz.