Шаклҳо ва санҷиш (валидатсия)

01 Шакл ва майдонҳои он: value ва checked

Шакл дар HTML — ин теги <form> аст, ки дар дохили он майдонҳои воридкунӣ ҷойгиранд: <input>, <select>, <textarea> ва тугмаи ирсол. Аломатгузориро шумо аллакай медонед — имрӯз ба мо муҳим аст, ки чӣ тавр маълумотро аз ин майдонҳо баровардан бо ёрии JavaScript.

Майдонро чӣ тавр ёфтан

Ҳар майдонро тавассути querySelector ёфтан мумкин аст, аммо шакл роҳи қулай дорад — маҷмӯаи form.elements. Дар он майдонҳо аз рӯи атрибути name дастрасанд:

<form id="reg">
  <label>Имя <input name="fullName" value="Мадина"></label>
  <label>Возраст <input name="age" type="number" value="19"></label>
  <label>Город
    <select name="city">
      <option value="dushanbe">Душанбе</option>
      <option value="khujand">Худжанд</option>
    </select>
  </label>
  <label><input type="checkbox" name="agree"> Согласен с правилами</label>
  <button type="button" id="show">Показать значения</button>
</form>

form { display: grid; gap: 10px; max-width: 320px; }
label { display: grid; gap: 4px; font-size: 14px; }
input, select, button { padding: 6px 8px; font: inherit; }
label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }

const form = document.querySelector("#reg");

document.querySelector("#show").addEventListener("click", () => {
  console.log("fullName:", form.elements.fullName.value);
  console.log("age:", form.elements.age.value, typeof form.elements.age.value);
  console.log("city:", form.elements.city.value);
  console.log("agree:", form.elements.agree.checked);
});

Иҷро кунед, дар пешнамоиш чизеро тағйир диҳед (номи дигар ворид кунед, нишона гузоред) ва «Показать значения»-ро пахш кунед. Инак мо чиро ва аз куҷо мехонем:

Тузоқи асосӣ: value — ҳамеша сатр

Ҳатто дар type="number" қимат ҳамчун сатр меояд. Ин ҳамон ҳикояи табдили навъҳо аз дарси 2 аст:

document.body.innerHTML = `
  <input name="plov" type="number" value="40">
  <input name="tea" type="number" value="10">`;

const plov = document.querySelector("[name=plov]").value;
const tea = document.querySelector("[name=tea]").value;

console.log(plov + tea);                   // "4010" — ҳамчун сатр часпиданд!
console.log(Number(plov) + Number(tea));   // 50 — аввал ба адад табдил медиҳем
console.log(document.querySelector("[name=plov]").valueAsNumber); // 40 — фавран адад

Атрибутҳои name, label ва type

• name — «номи майдон». Тавассути он мо майдонро дар form.elements меёбем, ва маҳз аз рӯи он маълумот ба FormData меафтад (бахши 3). Бе name майдон барои шакл «ноаён» аст.
• <label> — тавзеҳ. Майдонро дар он печонед ё тавассути for ва id пайваст кунед: он гоҳ клик ба матн курсорро ба майдон мегузорад, ва хонандаҳои экранӣ мефаҳманд, ки пеши онҳо кадом майдон аст.
• type — ба браузер ишора мекунад, ки дар телефон кадом клавиатураро нишон диҳад (tel — рақамӣ, email — бо «@») ва кадом санҷишҳоро фаъол кунад.

Барои муфассалтар хондан: Свойства и методы формы · MDN: элемент input

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Мадина Каримова">
    <input name="city" value="Душанбе">
    <input name="course" value="Frontend + AI">
  </form>`;

const form = document.querySelector("form");

// се сатрро тавассути console.log ва form.elements чоп кунед

Имя: Мадина Каримова
Город: Душанбе
Курс: Frontend + AI

document.body.innerHTML = `
  <form>
    <input name="plov" type="number" value="40">
    <input name="tea" type="number" value="10">
  </form>`;

const form = document.querySelector("form");
const plov = form.elements.plov.value;
const tea = form.elements.tea.value;

console.log("Итого:", plov + tea);
console.log("Со скидкой 10%:", (plov + tea) * 0.9);

Итого: 50
Со скидкой 10%: 45

document.body.innerHTML = `
  <form>
    <select name="course">
      <option value="html">HTML и CSS</option>
      <option value="js" selected>JavaScript</option>
    </select>
    <input type="radio" name="format" value="offline">
    <input type="radio" name="format" value="online" checked>
    <input type="checkbox" name="agree" checked>
    <input type="checkbox" name="news">
  </form>`;

const form = document.querySelector("form");

// Курс: ...  Формат: ...  Согласие: ...  Рассылка: ...

Курс: js
Формат: online
Согласие: true
Рассылка: false

02 Ирсоли шакл: ҳодисаи submit

Вақте одам тугмаи «Отправить»-ро пахш мекунад ё дар майдони матнӣ Enter-ро мезанад, шакл ҳодисаи submit-ро ба вуҷуд меоварад. Агар чизе накунед, браузер маълумотро ба сервер мефиристад ва саҳифаро аз нав бор мекунад — тамоми маълумоти воридшуда ва тамоми мантиқи JS-и шумо нест мешавад. Бинобар ин сатри аввали ҳар коркардкунандаи ирсол — event.preventDefault() (шумо инро аз дарси 9 медонед).

document.body.innerHTML = `
  <form id="order">
    <input name="dish" value="Оши палав">
    <input name="qty" type="number" value="2">
    <button>Заказать</button>
  </form>`;

const form = document.querySelector("#order");

form.addEventListener("submit", (event) => {
  event.preventDefault();                       // намегузорем, ки саҳифа аз нав бор шавад
  const dish = form.elements.dish.value;        // қиматҳоро ДАР ДОХИЛИ коркардкунанда мехонем
  const qty = Number(form.elements.qty.value);
  console.log(`Заказ принят: ${dish} × ${qty}`);
});

form.dispatchEvent(new Event("submit", { cancelable: true }));   // пахши тугмаи «Заказать»-ро тақлид мекунем

submit-ро мешунавем, на click-ро

button.addEventListener("click", () => {
  // Enter дар майдон ба ин ҷо намеояд
});

form.addEventListener("submit", (event) => {
  event.preventDefault();
  // ...
});

Тафсилоти муфид

event.target

Дар ҳодисаи submit ин худи шакл аст. Пас майдонҳоро чун event.target.elements.email гирифтан мумкин аст — коркардкунанда аз тағйирёбандаи берунӣ вобаста нест.

form.reset()

Ҳамаи майдонҳоро ба қиматҳои аввала бармегардонад (ҳамонҳое, ки дар атрибутҳои value / checked навишта шудаанд, ё холӣ). Баъди ирсоли бомуваффақият даъват мекунем.

form.dispatchEvent(new Event("submit", { cancelable: true }))

Ҳодисаи submit-ро дастӣ «мепаронад». Бо ин усул мо дар мисолҳо ва вазифаҳо пахши «Отправить»-ро тақлид мекунем: қуттии таълимии санҷиш ирсоли воқеии шаклҳоро манъ мекунад, бинобар ин одатии form.requestSubmit() (он тугмаро худаш пахш мекунад) дар ин ҷо кор намекунад. Дар сайти оддӣ шумо ба тугма клик мекунед ё маҳз requestSubmit()-ро даъват мекунед.

<button type="button">

Тугма дар дохили шакл ба таври пешфарз онро мефиристад. Агар тугма барои чизи дигар лозим бошад (масалан, «нишон додани парол»), type="button" нависед.

novalidate

Атрибути шакл: санҷиши дарунсохти браузерро хомӯш мекунад, то санҷиши худии шумо кор кунад (бахши 4).

document.body.innerHTML = `<form><input name="email"></form>`;
const form = document.querySelector("form");

const email = form.elements.email.value;   // ✖ фавран хондем — ҳанӯз холист

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("email:", "[" + email + "]");
});

form.elements.email.value = "madina@mail.tj";  // «корбар» суроғаро навишт
form.dispatchEvent(new Event("submit", { cancelable: true }));                          // → email: []

Барои муфассалтар хондан: Отправка формы: событие и метод submit · События change, input, cut, copy, paste

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Рустам">
    <input name="phone" value="+992927771234">
  </form>`;

const form = document.querySelector("form");

// коркардкунандаи submit-ро дар ин ҷо илова кунед


form.dispatchEvent(new Event("submit", { cancelable: true }));

Заявка принята: Рустам, +992927771234

document.body.innerHTML = `<form><input name="city"></form>`;
const form = document.querySelector("form");

const city = form.elements.city.value;

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Город:", city);
});

form.elements.city.value = "Худжанд";   // тағйир надиҳед
form.dispatchEvent(new Event("submit", { cancelable: true }));                    // тағйир надиҳед

Город: Худжанд

document.body.innerHTML = `
  <form>
    <input name="login">
    <input name="password" type="password">
  </form>`;

const form = document.querySelector("form");

// коркардкунандаи submit


function submitWith(login, password) {
  form.elements.login.value = login;
  form.elements.password.value = password;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
}

submitWith("", "12345");
submitWith("  madina  ", "");
submitWith("  madina  ", "qwerty1");

Ошибка: заполните все поля
Ошибка: заполните все поля
Вход выполнен: madina
Логин после сброса: пусто

03 FormData: ҳамаи майдонҳоро якбора ҷамъ мекунем

Агар дар шакл 10 майдон бошад, онҳоро якто-якто тавассути .value хондан — дилгиркунанда аст ва чизеро фаромӯш кардан осон аст. Барои ин дар браузер объекти дарунсохти FormData ҳаст: шумо шаклро ба он медиҳед, ва он худаш ҳамаи майдонҳоро бо атрибути name гашта, «ном → қимат»-и онҳоро ҷамъ мекунад.

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Мадина">
    <select name="city">
      <option value="dushanbe" selected>Душанбе</option>
      <option value="khujand">Худжанд</option>
    </select>
    <input type="checkbox" name="skills" value="css" checked>
    <input type="checkbox" name="skills" value="js" checked>
    <input type="checkbox" name="skills" value="git">
    <input type="checkbox" name="agree" checked>
    <input type="checkbox" name="news">
  </form>`;

const form = document.querySelector("form");
const data = new FormData(form);

console.log(data.get("fullName"));    // Мадина — як қимат аз рӯи ном
console.log(data.getAll("skills"));   // ["css", "js"] — ҳамаи қиматҳои як ном
console.log(data.has("news"));        // false — чекбокси бе нишона ба FormData намеафтад
console.log(data.get("agree"));       // "on" — дар чекбокси бе атрибути value қимат "on" аст

for (const [key, value] of data) {    // FormData-ро ҳамчун ҷуфтҳои «калид, қимат» гузаштан мумкин аст
  console.log(key, "=", value);
}

Аз FormData объекти маъмулиро ба осонӣ гирифтан мумкин аст — он лозим мешавад, то маълумотро захира кунед ё ба корбар нишон диҳед (дар шакли JSON, мисли дарси 7):

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Мадина">
    <input name="age" type="number" value="19">
  </form>`;

const data = new FormData(document.querySelector("form"));
const obj = Object.fromEntries(data);   // { fullName: "Мадина", age: "19" }

console.log(JSON.stringify(obj));
console.log(typeof obj.age);   // string — ҳамаи қиматҳо ҳанӯз ҳам сатранд!

Баъдтар, вақте ба кор бо сервер мерасем, ҳамин объекти FormData-ро ҳамон тавр ба сервер фиристодан мумкин мешавад. Ҳоло мақсади мо — ҷамъ кардани маълумот ва боварӣ ҳосил кардан аст, ки он дуруст аст.

Барои муфассалтар хондан: FormData · MDN: FormData

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Зарина Ахмедова">
    <input name="email" value="zarina@mail.tj">
    <select name="city">
      <option value="dushanbe" selected>Душанбе</option>
      <option value="khujand">Худжанд</option>
    </select>
  </form>`;

const form = document.querySelector("form");

// FormData созед ва се қиматро тавассути data.get(...) чоп кунед

Имя: Зарина Ахмедова
Email: zarina@mail.tj
Город: dushanbe

document.body.innerHTML = `
  <form>
    <input value="Далер">
    <input name="phone" value="+992900000000" disabled>
    <input type="checkbox" name="agree" checked>
  </form>`;

const form = document.querySelector("form");
console.log(JSON.stringify(Object.fromEntries(new FormData(form))));

{"fullName":"Далер","phone":"+992900000000","agree":"on"}

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Рустам">
    <input name="age" type="number" value="21">
    <input type="checkbox" name="skills" value="html" checked>
    <input type="checkbox" name="skills" value="css">
    <input type="checkbox" name="skills" value="js" checked>
    <input type="checkbox" name="agree" checked>
    <input type="checkbox" name="news">
  </form>`;

function readForm(form) {
  // объекти { fullName, age, skills, agree, news }-ро баргардонед
}

console.log(JSON.stringify(readForm(document.querySelector("form"))));

{"fullName":"Рустам","age":21,"skills":["html","js"],"agree":true,"news":false}

04 Санҷиши дарунсохти браузер

Санҷиш (валидатсия) — ин тафтиш аст, ки маълумот мувофиқ аст: майдон холӣ нест, email ба email монанд аст, синну сол дар ҳудуди оқилона. Браузер санҷиши тайёр дорад — онро атрибутҳои HTML фаъол мекунанд, ва JavaScript метавонад онро пурсон шавад.

Бевосита дар пешнамоиш кӯшиш кунед: майдонро холӣ гузоред ё «ali@» нависед ва «Отправить»-ро пахш кунед. Браузер худаш ишораи пайдошавандаро нишон медиҳад ва шаклро пеш намегузаронад.

<form id="f">
  <label>Имя <input name="fullName" required></label>
  <label>Email <input name="email" type="email" required></label>
  <label>Возраст <input name="age" type="number" min="16" max="70"></label>
  <button>Отправить</button>
</form>

form { display: grid; gap: 10px; max-width: 320px; }
label { display: grid; gap: 4px; font-size: 14px; }
input, button { padding: 6px 8px; font: inherit; }
/* :user-invalid майдонро танҳо БАЪДИ он равшан мекунад, ки корбар бо он кор кардааст */
input:user-invalid { border: 2px solid #d33; background: #fff0f0; }
input:user-valid { border: 2px solid #2a9d5c; }

const form = document.querySelector("#f");

// Қуттии санҷиш ирсоли воқеиро манъ мекунад, бинобар ин «Отправить»-ро бо клик коркард мекунем.
// Дар саҳифаи оддӣ ба ҷои ин form.addEventListener("submit", ...) менависанд
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  if (form.reportValidity()) {          // агар чизе нодуруст бошад, ишораҳои браузерро нишон медиҳад
    console.log("Форма прошла проверку браузера");
  }
});

Аз браузер аз JavaScript мепурсем

Ҳар майдон усулҳо ва хосиятҳо дорад, ки натиҷаи санҷиши дарунсохтро хабар медиҳанд:

document.body.innerHTML = `
  <form>
    <input name="email" type="email" required value="madina@">
  </form>`;

const email = document.querySelector("[name=email]");

console.log(email.checkValidity());          // false — майдон санҷишро намегузарад
console.log(email.validity.valid);           // false — ҳамон чиз, аммо ҳамчун хосият
console.log(email.validity.typeMismatch);    // true — «навъ нодуруст»: ин email нест
console.log(email.validity.valueMissing);    // false — майдон холӣ нест

email.value = "madina@mail.tj";
console.log(email.checkValidity());          // true — акнун ҳама чиз хуб аст

checkValidity()

true / false бармегардонад. Дар шакл ҳамаи майдонҳои онро якбора месанҷад.

reportValidity()

Ҳамон, аммо боз ишораи пайдошавандаи браузерро ба корбар нишон медиҳад.

validity

Объект бо парчамҳои сабабҳо: valueMissing (холӣ дар required), typeMismatch (на email/url), patternMismatch (pattern мувофиқ наомад), rangeUnderflow / rangeOverflow (аз min кам / аз max зиёд), tooShort / tooLong, customError.

validationMessage

Матни хато бо забони браузери корбар. Дар як одам он русӣ, дар дигаре англисӣ аст — онро идора кардан мумкин нест.

setCustomValidity("матн")

Майдонро бо паёми шумо дастӣ нодуруст эълон мекунад. Сатри холӣ "" хаторо мебардорад.

document.body.innerHTML = `
  <form>
    <input name="password" type="password" value="qwerty123">
    <input name="confirm" type="password" value="qwerty321">
  </form>`;

const { password, confirm } = document.querySelector("form").elements;

confirm.setCustomValidity(password.value === confirm.value ? "" : "Пароли не совпадают");

console.log(confirm.checkValidity());        // false — паролҳо гуногунанд
console.log(confirm.validationMessage);      // Пароли не совпадают

Санҷиши дарунсохт чӣ камбуд дорад

• Матнҳои хато — бо забон ва услуби браузер, онҳоро мувофиқи тарҳи сайт тарроҳӣ кардан мумкин нест.
• Як ҳубобча дар як вақт — одам танҳо хатои аввалро мебинад, на ҳамаро якбора.
• Қоидаҳои мураккаб — «паролҳо мувофиқанд», «телефон танҳо тоҷикӣ» коди худиро талаб мекунанд.
• Санҷиши зинда ҳангоми воридкунӣ — бе JavaScript-и худӣ «зебо» намешавад.

Аз ин рӯ дар амал чунин мекунанд: атрибутҳои асосӣ (required, type)-ро барои ишораҳои клавиатураи мобилӣ мегузоранд, ва худи санҷиш ва матнҳои хатоҳоро дар JavaScript менависанд ва ҳубобчаҳои браузериро бо атрибути novalidate дар шакл хомӯш мекунанд:

<form id="reg" novalidate>
  <input name="email" type="email" required>
</form>

Барои муфассалтар хондан: MDN: валидация форм на стороне клиента · MDN: ValidityState

document.body.innerHTML = `
  <form>
    <input name="fullName" required value="">
    <input name="email" type="email" value="madina@">
    <input name="age" type="number" min="16" max="70" value="15">
    <input name="phone" pattern="\\+992[0-9]{9}" value="+992927771234">
  </form>`;

const form = document.querySelector("form");
const bad = [];

// аз болои form.elements гузаред ва массиви bad-ро бо номҳои майдонҳои нодуруст пур кунед

console.log("Невалидные поля: " + bad.join(", "));

Невалидные поля: fullName, email, age

document.body.innerHTML = `
  <input id="a" required value="">
  <input id="b" type="email" value="ali.mail.tj">
  <input id="c" type="number" min="16" value="12">
  <input id="d" pattern="[0-9]{4}" value="12ab">
  <input id="e" required value="всё хорошо">`;

function reasonOf(input) {
  // яке аз панҷ сатрро баргардонед
}

for (const id of ["a", "b", "c", "d", "e"]) {
  console.log(id + ": " + reasonOf(document.getElementById(id)));
}

a: пусто
b: не email
c: слишком мало
d: не по шаблону
e: ок

document.body.innerHTML = `
  <form>
    <input name="fullName" required>
    <input name="email" type="email" value="madina@mail.tj">
  </form>`;

const form = document.querySelector("form");

// 1) form.checkValidity()-ро чоп кунед
// 2) номро дар майдони fullName нависед
// 3) form.checkValidity()-ро боз як бор чоп кунед

false
true

05 Ибораҳои муқаррарӣ барои навомӯзон

Ибораи муқаррарӣ (regex, «регэксп») — ин қолаби кӯтоҳест, ки тавсиф мекунад, сатр чӣ гуна бояд бошад. «Танҳо рақамҳо», «бо +992 оғоз мешавад ва баъд нӯҳ рақам», «ҳарфҳои лотинӣ ва зерхат» — ҳамаи инро бо як сатр навиштан мумкин аст. Барои санҷиши шаклҳо ин абзори ивазнашаванда аст.

const onlyDigits = /^\d+$/;          // байни слэшҳо — қолаб

console.log(onlyDigits.test("12345"));  // true  — мувофиқ аст
console.log(onlyDigits.test("12a45"));  // false — ҳарф ҳаст
console.log(onlyDigits.test(""));       // false — холӣ (ақаллан як рақам лозим аст)

Ибораи муқаррарӣ байни ду слэш навишта мешавад /.../. Усули .test(сатр) true бармегардонад, агар сатр ба қолаб мувофиқ бошад, вагарна — false. Акнун «ҳарфҳои» ин забонро шарҳ медиҳем.

Алифбои регэксп: танҳо якчанд аломат

Регэкспро қисм ба қисм мехонем

Рақами телефон дар Тоҷикистон: +992 ва нӯҳ рақам. Қолабро аз чап ба рост шарҳ медиҳем:

const phone = /^\+992\d{9}$/;

console.log(phone.test("+992927771234"));    // true
console.log(phone.test("+99292777123"));     // false — танҳо 8 рақам
console.log(phone.test("+9929277712345"));   // false — 10 рақам, зиёдатӣ
console.log(phone.test("927771234"));        // false — рамзи кишвар нест

Лангарҳои ^ ва $: хатои аз ҳама маъмул

Бе ^ ва $ регэксп пораи мувофиқро дар дохили сатр меҷӯяд — ва хасу хошокро дар атрофаш мегузаронад:

const bad  = /\d{4}/;      // «дар ягон ҷои сатр 4 рақами пайи ҳам ҳаст»
const good = /^\d{4}$/;    // «тамоми сатр — айнан 4 рақам»

console.log(bad.test("abc1234xyz"));   // true  ← ✖ хасу хошокро гузарониданд
console.log(good.test("abc1234xyz"));  // false ← ин тавр дуруст аст
console.log(good.test("1234"));        // true

Парчамҳо ва иваз: воридотро тоза мекунем

Баъди слэши пӯшанда парчамҳо мегузоштан мумкин аст: i — ҳарфҳои калон ва хурдро фарқ накардан, g — ҳамаи мувофиқатҳоро ҷустан, на танҳо аввалинро. Бо усули replace ин роҳи қулай барои аз фосила ва дефисҳо тоза кардани телефон аст:

const raw = "+992 92 777-12-34";
const clean = raw.replace(/[\s-]/g, "");   // ҳамаи фосила ва дефисҳоро мебарорем
console.log(clean);                        // +992927771234

console.log(/^tj$/i.test("TJ"));           // true — регистр аз сабаби парчами i муҳим нест
console.log("a1b22c333".replace(/\D/g, ""));  // 122333 — танҳо рақамҳоро мондем

Қолабҳои тайёр барои шаклҳо

Барои муфассалтар хондан: Шаблоны и флаги · Якоря: начало ^ и конец $ · MDN: регулярные выражения

const onlyDigits = /___/;

for (const s of ["12345", "12a45", "", "007"]) {
  console.log("[" + s + "] → " + onlyDigits.test(s));
}

[12345] → true
[12a45] → false
[] → false
[007] → true

function isPhone(value) {
  // 1) value-ро тоза кунед   2) қолабро санҷед
}

const tests = ["+992927771234", "+992 92 777-12-34", "927771234", "+99292777123", "+992abc771234", ""];
for (const t of tests) {
  console.log("[" + t + "] → " + isPhone(t));
}

[+992927771234] → true
[+992 92 777-12-34] → true
[927771234] → false
[+99292777123] → false
[+992abc771234] → false
[] → false

function isLogin(value) {
  // true ё false-ро баргардонед
}

const tests = ["madina_01", "Rustam", "1madina", "ma", "madina-01", "Shahrom_Komilov_2024_x"];
for (const t of tests) {
  console.log(t + " → " + isLogin(t));
}

madina_01 → true
Rustam → true
1madina → false
ma → false
madina-01 → false
Shahrom_Komilov_2024_x → false

const zip = /\d{6}/;

for (const s of ["734025", "73402", "7340256", "ab734025"]) {
  console.log(s + " → " + zip.test(s));
}

734025 → true
73402 → false
7340256 → false
ab734025 → false

function passwordStrength(p) {
  let points = 0;
  // ба points барои ҳар шарт 1-тоӣ илова кунед

  // "слабый", "средний" ё "сильный"-ро баргардонед
}

for (const p of ["", "abc", "12345678", "madina123", "Madina2024", "Madina2024!"]) {
  console.log("[" + p + "] → " + passwordStrength(p));
}

[] → слабый
[abc] → слабый
[12345678] → слабый
[madina123] → средний
[Madina2024] → средний
[Madina2024!] → сильный

06 Санҷиши худӣ: функсияҳои санҷанда ва матнҳои хатоҳо

Акнун мо ҳама чизро дорем, то санҷиши худиро нависем. Дастур оддӣ аст ва барои ҳар шакл кор мекунад:

1. Як санҷанда барои як майдон. Ин функсияест, ки қиматро мегирад ва матни хато-ро бармегардонад — ё сатри холии "", агар ҳама чиз хуб бошад.
2. Дар объект ҷамъ мекунем. { fullName: validateName, email: validateEmail, ... } — аз рӯи калид намоён аст, ки кадом санҷанда ба кадом майдон тааллуқ дорад.
3. Хатоҳоро нишон медиҳем. Матн — дар <span> дар зери майдон, ва худи майдонро бо чаҳорчӯбаи сурх ва атрибути aria-invalid қайд мекунем.
4. Намефиристем, то даме ки ақаллан як хато ҳаст.

Қадами 1: санҷанда — функсияи «қимат → матни хато» аст

function validateEmail(value) {
  const email = value.trim();                       // фосилаҳои канориро мебарорем
  if (email === "") return "Введите email";
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return "Похоже, в адресе ошибка. Пример: madina@mail.tj";
  }
  return "";                                        // сатри холӣ = хато нест
}

console.log("[" + validateEmail("") + "]");
console.log("[" + validateEmail("madina@") + "]");
console.log("[" + validateEmail("  madina@mail.tj ") + "]");

Функсия танҳо месанҷад ва дар бораи саҳифа чизе намедонад. Бинобар ин санҷидани он осон аст (мо ҳоло онро бо се мисол даъват кардем) ва истифодаи такрории он осон — дар ҳар саҳифа ва бо ҳар тарҳ. Қоидаи «як функсия ҳисоб мекунад, дигар нишон медиҳад»-ро шумо дар дарси 5 дидаед.

Кадом матнҳои хато навиштан лозим

• Бо «Шумо» ва оромона сухан гӯед: на «Ту нодуруст ворид кардӣ», балки «Лутфан, email-ро санҷед».
• Қоида-ро ном гиред, на танҳо далели хаторо: «ақаллан 2 ҳарф» муфидтар аз «хеле кӯтоҳ» аст.
• Хаторо дар паҳлӯи майдон нишон диҳед, на бо як тирезаи alert дар болои саҳифа.
• Майдони ҳатмии холӣ ва формати нодуруст — паёмҳои гуногун-анд: «Введите email» ва «Неверный формат email».

Қадами 2: ҳамаи майдонҳоро якбора месанҷем

Вақте санҷандаҳо якчанд бошанд, онҳоро дар объект нигоҳ доштан ва бо давра гузаштан қулай аст. Дар баромад — объекти хатоҳо: дар он калидҳо танҳо барои майдонҳои нодуруст ҳастанд. Объекти холӣ — ҳама чиз хуб.

const validators = {
  fullName: (v) => (v.trim().length < 2 ? "Введите имя (минимум 2 буквы)" : ""),
  age: (v) => (Number(v) >= 16 ? "" : "Курс с 16 лет"),
};

function validateAll(data) {
  const errors = {};
  for (const field in validators) {
    const message = validators[field](data[field]);
    if (message) errors[field] = message;
  }
  return errors;
}

console.log(JSON.stringify(validateAll({ fullName: "Мадина", age: "19" })));   // {}
console.log(JSON.stringify(validateAll({ fullName: "М", age: "15" })));

Қадами 3: хаторо дар саҳифа нишон медиҳем

Ҳар майдон «ҷой барои хато» мегирад — <span>-и холӣ дар паҳлӯ. Ҳангоми хато мо матнро ба он менависем, ҳангоми набудани он — пок мекунем. Ҳамеша textContent-ро истифода баред, на innerHTML: воридоти корбарро ҳамчун HTML ба саҳифа гузоштан мумкин нест.

<form id="f" novalidate>
  <div class="field">
    <label for="fullName">Имя</label>
    <input id="fullName" name="fullName">
    <span class="error" data-error="fullName"></span>
  </div>
  <div class="field">
    <label for="age">Возраст</label>
    <input id="age" name="age" inputmode="numeric">
    <span class="error" data-error="age"></span>
  </div>
  <button>Отправить</button>
</form>

form { display: grid; gap: 12px; max-width: 320px; }
.field { display: grid; gap: 4px; }
label { font-size: 14px; }
input, button { padding: 6px 8px; font: inherit; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }

const form = document.querySelector("#f");

const validators = {
  fullName: (v) => (v.trim().length < 2 ? "Введите имя (минимум 2 буквы)" : ""),
  age: (v) => (Number(v) >= 16 ? "" : "Возраст — число от 16"),
};

function showError(name, message) {
  const input = form.elements[name];
  const box = form.querySelector(`[data-error="${name}"]`);
  box.textContent = message;                               // сатри холӣ хаторо пок мекунад
  input.classList.toggle("invalid", message !== "");       // чаҳорчӯбаи сурх
  input.setAttribute("aria-invalid", message ? "true" : "false");  // барои хонандаҳои экран
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  let firstBad = null;
  for (const name in validators) {
    const message = validators[name](form.elements[name].value);
    showError(name, message);
    if (message && !firstBad) firstBad = form.elements[name];
  }
  if (firstBad) {
    firstBad.focus();                 // курсорро ба аввалин майдони хатодор мегузорем
    return;                           // минбаъд намеравем — шакл фиристода намешавад
  }
  console.log("Отправлено:", JSON.stringify(Object.fromEntries(new FormData(form))));
});

// Қуттии санҷиш ирсоли воқеии шаклро манъ мекунад, бинобар ин клики тугмаро дастӣ ба submit табдил медиҳем
// (дар саҳифаи оддӣ ин иловагӣ лозим нест)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  form.dispatchEvent(new Event("submit", { cancelable: true }));
});

Иҷро кунед, «Отправить»-ро бо майдонҳои холӣ пахш кунед, баъд ислоҳ кунед ва боз фиристед. Ба се ҷузъ диққат диҳед: хатоҳо фавран дар ҳамаи майдонҳо нишон дода мешаванд, курсор дар аввалин майдони «бад» меистад, ва дар майдони ислоҳшуда хато нест мешавад.

Барои муфассалтар хондан: Фокусировка: focus/blur · MDN: валидация форм с помощью JavaScript

function validateName(value) {
  // "" ё матни хаторо баргардонед
}

for (const v of ["", "   ", "А", "Мадина", "  Фарход  "]) {
  console.log("[" + validateName(v) + "]");
}

[Введите имя]
[Введите имя]
[Имя слишком короткое]
[]
[]

function validateAge(value) {
  // фаромӯш накунед: Number("") ба 0 баробар аст, бинобар ин холиро алоҳида ва аввал месанҷем
}

for (const v of ["", "abc", "15", "24", "99", " 30 "]) {
  console.log("[" + validateAge(v) + "]");
}

[Введите возраст]
[Возраст — это число]
[Курс с 16 лет]
[]
[Проверьте возраст]
[]

function validatePassword(password, login) {
  const problems = [];
  // матнҳоро тавассути push ба problems илова кунед
  return problems;
}

const tests = [["abc", "madina"], ["Madina", "madina"], ["pass word 1", "x"], ["qwerty123", "madina"]];
for (const [p, l] of tests) {
  console.log(validatePassword(p, l).join(" | ") || "ок");
}

Минимум 8 символов | Добавьте цифру
Минимум 8 символов | Добавьте цифру | Не совпадает с логином
Без пробелов
ок

function validateName(v) {
  return v.trim().length < 2 ? "Введите имя" : "";
}
function validateEmail(v) {
  if (v.trim() === "") return "Введите email";
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()) ? "" : "Неверный email";
}
function validatePhone(v) {
  return /^\+992\d{9}$/.test(v.replace(/[\s-]/g, "")) ? "" : "Телефон: +992 и 9 цифр";
}

const validators = { fullName: validateName, email: validateEmail, phone: validatePhone };

function validateForm(data) {
  // объекти хатоҳоро баргардонед
}

const forms = [
  { fullName: "Мадина", email: "madina@mail.tj", phone: "+992 92 777 12 34" },
  { fullName: " ", email: "madina@", phone: "+992927771234" },
  { fullName: "Фарход", email: "", phone: "927771234" },
];
for (const data of forms) console.log(JSON.stringify(validateForm(data)));

{}
{"fullName":"Введите имя","email":"Неверный email"}
{"email":"Введите email","phone":"Телефон: +992 и 9 цифр"}

<form id="f" novalidate>
  <div class="field">
    <label for="fullName">Имя</label>
    <input id="fullName" name="fullName">
    <span class="error" data-error="fullName"></span>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email">
    <span class="error" data-error="email"></span>
  </div>
  <button>Отправить</button>
</form>

form { display: grid; gap: 12px; max-width: 320px; }
.field { display: grid; gap: 4px; }
input, button { padding: 6px 8px; font: inherit; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }

const form = document.querySelector("#f");

const validators = {
  fullName: (v) => (v.trim().length < 2 ? "Введите имя (минимум 2 буквы)" : ""),
  email: (v) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()) ? "" : "Введите email, например madina@mail.tj"),
};

function showError(name, message) {
  // матн дар span, синфи invalid, aria-invalid
}

form.addEventListener("submit", (event) => {
  // preventDefault, санҷиши ҳамаи майдонҳо, showError, "Отправлено" ҳангоми муваффақият
});

// ---- санҷиш (тағйир надиҳед) ----
// Қуттии санҷиш ирсоли воқеии шаклро манъ мекунад, бинобар ин клики тугмаро дастӣ ба submit табдил медиҳем
// (дар саҳифаи оддӣ ин иловагӣ лозим нест)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  form.dispatchEvent(new Event("submit", { cancelable: true }));
});
function report(name) {
  const input = form.elements[name];
  const text = form.querySelector(`[data-error="${name}"]`).textContent;
  console.log(`${name}: ${text || "ok"} | aria-invalid=${input.getAttribute("aria-invalid")} | invalid=${input.classList.contains("invalid")}`);
}
function tryWith(fullName, email) {
  form.elements.fullName.value = fullName;
  form.elements.email.value = email;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
  report("fullName");
  report("email");
}
tryWith(" ", "ali@mail.tj");
tryWith("Али", "ali@");
tryWith("Али", "ali@mail.tj");

fullName: Введите имя (минимум 2 буквы) | aria-invalid=true | invalid=true
email: ok | aria-invalid=false | invalid=false
fullName: ok | aria-invalid=false | invalid=false
email: Введите email, например madina@mail.tj | aria-invalid=true | invalid=true
Отправлено
fullName: ok | aria-invalid=false | invalid=false
email: ok | aria-invalid=false | invalid=false

07 Санҷиши зинда: ҳангоми чоп кардани одам месанҷем

Санҷиш танҳо ҳангоми пахши «Отправить» кор мекунад, аммо нокулай аст: одам даҳ майдонро пур кард ва дар бораи хато дар аввалин майдон мефаҳмад. Санҷиши зинда фавран ишора мекунад. Барои он се ҳодиса лозим аст:

input

Дар ҳар тағйири қимат кор мекунад: клавиша заданд, матн гузоштанд, аломатро пок карданд.

change

Вақте кор мекунад, ки қимат тағйир ёфт ва майдон фокусро аз даст дод (барои чекбокс ва рӯйхат — фавран ҳангоми интихоб).

blur

Майдон фокусро аз даст дод — одам ба майдони дигар рафт. Боло намеравад (баръакси focusout).

Қоидаи «ламс шуд / ламс нашуд» (touched)

1. То даме ки одам майдонро тарк накардааст — хаторо нишон намедиҳем, ҳатто агар қимат ҳоло нодуруст бошад.
2. Вақте blur кор кард — майдон «ламсшуда» ҳисоб мешавад: месанҷем ва хаторо нишон медиҳем.
3. Аз ҳамин лаҳза дар ҳар input аз нав месанҷем: ҳамин ки одам ислоҳ кард, хато фавран нест мешавад.
4. Ҳангоми пахши «Отправить» ҳамаи майдонҳоро якбора «ламс мекунем» ва ҳамаи хатоҳоро нишон медиҳем.

<form id="f" novalidate>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="off">
    <span class="error" id="email-error"></span>
  </div>
  <div class="field">
    <label for="pass">Пароль</label>
    <div class="row">
      <input id="pass" name="pass" type="password" maxlength="20">
      <button type="button" id="eye">Показать</button>
    </div>
    <span class="hint" id="pass-hint">Введено: 0 из 20</span>
  </div>
</form>

form { display: grid; gap: 12px; max-width: 320px; }
.field { display: grid; gap: 4px; }
.row { display: flex; gap: 6px; }
.row input { flex: 1; }
input, button { padding: 6px 8px; font: inherit; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }
.hint { color: #667; font-size: 13px; }

const email = document.querySelector("#email");
const emailError = document.querySelector("#email-error");
let touched = false;

function validateEmail() {
  const value = email.value.trim();
  let message = "";
  if (value === "") message = "Введите email";
  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) message = "Похоже, в адресе ошибка";
  emailError.textContent = message;
  email.classList.toggle("invalid", message !== "");
}

email.addEventListener("blur", () => {
  touched = true;          // одам аз майдон баромад — акнун метавон хафа шуд
  validateEmail();
});
email.addEventListener("input", () => {
  if (touched) validateEmail();   // баъди аввалин «баромадан» барои ҳар ҳарф месанҷем
});

// парол: ҳисобкунаки аломатҳо ва тугмаи «нишон додан»
const pass = document.querySelector("#pass");
const hint = document.querySelector("#pass-hint");
pass.addEventListener("input", () => {
  hint.textContent = `Введено: ${pass.value.length} из ${pass.maxLength}`;
});

document.querySelector("#eye").addEventListener("click", (event) => {
  const hidden = pass.type === "password";
  pass.type = hidden ? "text" : "password";
  event.target.textContent = hidden ? "Скрыть" : "Показать";
});

Кӯшиш кунед: дар email «ali» чоп кунед — чизе намешавад. Tab-ро пахш кунед — хато пайдо шуд. «@mail.tj»-ро нависед — хато ҳангоми чоп кардан нест шуд.

Муқоисаи ду майдон: парол ва такрор

Қоидаи «паролҳо мувофиқанд» аз ду майдон вобаста аст, бинобар ин ҳангоми тағйири ҳар кадом онҳо санҷидан лозим аст. Хатои маъмул — танҳо ба майдони дуюм обуна шудан: одам пароли аввалро ислоҳ кард, аммо хатои сурх дар дуюм монд.

document.body.innerHTML = `<input id="pass"><input id="again"><span id="msg"></span>`;
const pass = document.querySelector("#pass");
const again = document.querySelector("#again");
const msg = document.querySelector("#msg");

function checkMatch() {
  msg.textContent = pass.value === again.value ? "" : "Пароли не совпадают";
}
pass.addEventListener("input", checkMatch);    // ҳар ду майдон ба натиҷа таъсир мерасонанд
again.addEventListener("input", checkMatch);

pass.value = "qwerty1";   pass.dispatchEvent(new Event("input"));
again.value = "qwerty1";  again.dispatchEvent(new Event("input"));
console.log("[" + msg.textContent + "]");       // [] — мувофиқ шуданд
pass.value = "qwerty2";   pass.dispatchEvent(new Event("input"));
console.log("[" + msg.textContent + "]");       // [Пароли не совпадают] — аввалиро ислоҳ карданд

Барои муфассалтар хондан: События change, input · Фокусировка: focus/blur

document.body.innerHTML = `
  <input id="pass" type="password" value="secret">
  <button id="eye" type="button">Показать</button>`;

const pass = document.querySelector("#pass");
const eye = document.querySelector("#eye");

// коркардкунандаи click-ро барои тугмаи eye илова кунед


eye.click();
console.log(pass.type, eye.textContent);
eye.click();
console.log(pass.type, eye.textContent);

text Скрыть
password Показать

document.body.innerHTML = `<textarea id="bio"></textarea><p id="left"></p>`;
const bio = document.querySelector("#bio");
const left = document.querySelector("#left");
const LIMIT = 40;

// 1) функсияи update() ба left матни «Осталось: N»-ро менависад
// 2) онро фавран ва ба ҳодисаи input даъват кунед


console.log(left.textContent);
bio.value = "Привет!";
bio.dispatchEvent(new Event("input"));
console.log(left.textContent);
bio.value = "а".repeat(40);
bio.dispatchEvent(new Event("input"));
console.log(left.textContent);

Осталось: 40
Осталось: 33
Осталось: 0

document.body.innerHTML = `<input id="email"><span id="error"></span>`;
const email = document.querySelector("#email");
const error = document.querySelector("#error");

// коди шумо: тағйирёбандаи touched, функсияи validate, коркардкунандаҳои blur ва input


function show() {
  console.log(error.textContent || "нет ошибки");
}

email.value = "ali";
email.dispatchEvent(new Event("input"));
show();
email.dispatchEvent(new Event("blur"));
show();
email.value = "ali@mail.tj";
email.dispatchEvent(new Event("input"));
show();

нет ошибки
Неверный email
нет ошибки

<form id="f">
  <input id="password" type="password" placeholder="Пароль">
  <input id="confirm" type="password" placeholder="Повторите пароль">
  <button id="submit">Создать аккаунт</button>
</form>

form { display: grid; gap: 10px; max-width: 320px; }
input, button { padding: 6px 8px; font: inherit; }
button:disabled { opacity: .5; cursor: not-allowed; }

const password = document.querySelector("#password");
const confirm = document.querySelector("#confirm");
const submit = document.querySelector("#submit");

function updateButton() {
  // submit.disabled = ... (true, то даме ки шартҳо иҷро намешаванд)
}

// updateButton()-ро ҳангоми бор шудан ва ҳангоми input дар ҳар ду майдон даъват кунед


// ---- санҷиш (тағйир надиҳед) ----
const state = () => (submit.disabled ? "заблокирована" : "активна");
function type(field, value) {
  field.value = value;
  field.dispatchEvent(new Event("input", { bubbles: true }));
  console.log(`пароль="${password.value}", повтор="${confirm.value}" → кнопка ${state()}`);
}
console.log("старт: кнопка " + state());
type(password, "1234");
type(password, "12345678");
type(confirm, "1234567");
type(confirm, "12345678");
type(password, "87654321");

старт: кнопка заблокирована
пароль="1234", повтор="" → кнопка заблокирована
пароль="12345678", повтор="" → кнопка заблокирована
пароль="12345678", повтор="1234567" → кнопка заблокирована
пароль="12345678", повтор="12345678" → кнопка активна
пароль="87654321", повтор="12345678" → кнопка заблокирована

08 Блоки ЗС: қоидаҳои санҷиш ва регэкспҳо

Қоидаҳои курсро ёдрас мекунем: аввал 15 дақиқа худатон кӯшиш кунед, ва ҳеҷ гоҳ коде, ки сатр ба сатр шарҳ дода наметавонед, ворид накунед. Имрӯз шумо аллакай регэкспҳоро хонда метавонед, бинобар ин ҷавоби ЗС-ро қисм ба қисм таҳлил кардан мумкин аст.

1. Қоидаҳои санҷишро талаб мекунем

Формулаи промптро истифода мебарем: контекст → вазифа → маҳдудиятҳо → формати ҷавоб → санҷиш.

2. Регэкспи ЗС-ро бо ҳолатҳои худамон месанҷем

Ҳатто ба ҷавоби аз ҳама боэътимод бовар накунед. Одат кунед — ҷадвали санҷишҳо:

1. 3–5 сатри мувофиқ, аз ҷумла «ифлос» (бо фосилаҳо дар канор, бо регистри гуногун).
2. Сатри холӣ — бояд рад карда шавад (агар майдон ҳатмӣ бошад).
3. Ҳудуди дарозӣ: як кам аз ҳадди ақал, айнан ҳадди ақал, айнан ҳадди аксар, як зиёд аз ҳадди аксар.
4. «Хасу хошок» дар атроф: abc1234xyz дар ҷое, ки танҳо рақамҳо лозиманд. Ҳамин тавр шумо набудани ^ ва $-ро мегиред.
5. Маълумоти воқеии шумо: телефонҳо аз китобчаи ёддошти шумо, номҳои дӯстон бо кириллӣ, email-и воқеии шумо.

const re = /^\+992\d{9}$/;   // регэкспи ЗС

const cases = [
  ["+992927771234", true],      // мувофиқ аст
  [" +992927771234", false],    // фосила дар оғоз — шумо қарор медиҳед, ки иҷозат аст ё не
  ["+99292777123", false],      // як рақам кам
  ["+9929277712345", false],    // як рақам зиёд
  ["abc+992927771234xyz", false],  // хасу хошок дар атроф
  ["", false],                  // холӣ
];

for (const [value, expected] of cases) {
  console.log((re.test(value) === expected ? "ok  " : "FAIL") + " [" + value + "]");
}

3. ЗС чӣ чизро бештар нодуруст мекунад

const re = /\d/g;                  // парчами g — «дар хотир дор, дар куҷо истодӣ»
console.log(re.test("1"));         // true
console.log(re.test("1"));         // false ← ✖ ҳамон сатр, ҷавоби дигар
console.log(re.test("1"));         // true

4. Боз се промпти муфид

const phoneRe = /^\+992\d{9}/;   // регэкспи ЗС

const cases = [
  ["+992927771234", true],
  ["+992927771234567", false],
  ["+99292777123", false],
  ["992927771234", false],
  ["+992 927771234", false],
  ["+992abcdefghi", false],
  ["", false],
];

let failed = 0;
for (const [value, expected] of cases) {
  const ok = phoneRe.test(value) === expected;
  if (!ok) failed++;
  console.log((ok ? "ok" : "FAIL") + ": [" + value + "]");
}
console.log("Не прошли: " + failed);

ok: [+992927771234]
ok: [+992927771234567]
ok: [+99292777123]
ok: [992927771234]
ok: [+992 927771234]
ok: [+992abcdefghi]
ok: []
Не прошли: 0

const isEmail = (s) => /^.+@.+$/.test(s);   // версияи ЗС

const cases = [
  ["madina@mail.tj", true],
  ["  madina@mail.tj  ", true],
  ["m.karimova+tj@gmail.com", true],
  ["madina@", false],
  ["madina@mail", false],
  ["@mail.tj", false],
  ["ma dina@mail.tj", false],
  ["madina@@mail.tj", false],
];

let failed = 0;
for (const [value, expected] of cases) {
  const ok = isEmail(value) === expected;
  if (!ok) failed++;
  console.log((ok ? "ok" : "FAIL") + ": [" + value + "]");
}
console.log("Не прошли: " + failed);

ok: [madina@mail.tj]
ok: [  madina@mail.tj  ]
ok: [m.karimova+tj@gmail.com]
ok: [madina@]
ok: [madina@mail]
ok: [@mail.tj]
ok: [ma dina@mail.tj]
ok: [madina@@mail.tj]
Не прошли: 0

09 Амалиёт дар дарс: шакли сабти ном бо санҷиши зинда

Ҳамаро дар як шакл ҷамъ мекунем — чунон, ки шумо дар ҳар сайт мебинед. Мо номнависӣ ба курсро месозем: ном, email, парол ва такрори парол.

Нақшаи кор

1. Аломатгузорӣ. Шакл бо novalidate, дар ҳар майдон — label, name ва span.error-и холӣ дар зери он (data-error="номи майдон").
2. Санҷандаҳо. Функсияҳои «қимат → матни хато», ки дар объекти validators ҷамъ шудаанд (бахши 6).
3. Нишон додани хатоҳо. showError — матн, чаҳорчӯбаи сурх, aria-invalid.
4. Санҷиши зинда. Луғати touched, коркардкунандаҳои blur ва input (бахши 7).
5. Ирсол. Коркардкунандаи submit: ҳамаи майдонҳоро «ламс мекунем», месанҷем, фокус ба аввалин хатодор ё муваффақият (бахши 2).

Аломатгузорӣ, услубҳо ва «скелет»-и умумӣ (қадамҳои 1, 3)-ро мо тайёр медиҳем. Кори шумо — ду марҳила.

<form id="reg" novalidate>
  <div class="field">
    <label for="fullName">Имя</label>
    <input id="fullName" name="fullName" autocomplete="off">
    <span class="error" data-error="fullName"></span>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="off">
    <span class="error" data-error="email"></span>
  </div>
  <div class="field">
    <label for="password">Пароль</label>
    <input id="password" name="password" type="password">
    <span class="error" data-error="password"></span>
  </div>
  <div class="field">
    <label for="confirm">Повторите пароль</label>
    <input id="confirm" name="confirm" type="password">
    <span class="error" data-error="confirm"></span>
  </div>
  <button>Создать аккаунт</button>
</form>

form { display: grid; gap: 12px; max-width: 340px; }
.field { display: grid; gap: 4px; }
label { font-size: 14px; font-weight: 600; }
input, button { padding: 8px 10px; font: inherit; border: 1px solid #b8c0cc; border-radius: 8px; }
button { background: #1d9a6c; color: #fff; border-color: transparent; cursor: pointer; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }

const form = document.querySelector("#reg");
const touched = {};

const validators = {
  fullName(value) {
    // ном: баъди trim ҳадди ақал 2 аломат → "Имя — минимум 2 буквы"
    return "";
  },
  email(value) {
    // формат /^[^\s@]+@[^\s@]+\.[^\s@]+$/ → "Введите email в формате name@mail.tj"
    return "";
  },
  password(value) {
    // аввал дарозӣ: "Пароль — минимум 8 символов", баъд рақам: "Добавьте хотя бы одну цифру"
    return "";
  },
};

// ---- қисми тайёр: нишон додани хатоҳо ва санҷиши зинда ----
function showError(name, message) {
  const input = form.elements[name];
  form.querySelector(`[data-error="${name}"]`).textContent = message;
  input.classList.toggle("invalid", message !== "");
  input.setAttribute("aria-invalid", message ? "true" : "false");
}

function validateField(name) {
  const message = validators[name](form.elements[name].value);
  showError(name, message);
  return message === "";
}

for (const name of Object.keys(validators)) {
  const input = form.elements[name];
  input.addEventListener("blur", () => {
    touched[name] = true;
    validateField(name);
  });
  input.addEventListener("input", () => {
    if (touched[name]) validateField(name);
  });
}

// ---- санҷиш (тағйир надиҳед) ----
function typeInto(name, value) {
  const field = form.elements[name];
  field.value = value;
  field.dispatchEvent(new Event("input", { bubbles: true }));
}
function leave(name) {
  form.elements[name].dispatchEvent(new Event("blur"));
}
function msg(name) {
  return form.querySelector(`[data-error="${name}"]`).textContent || "ok";
}

typeInto("fullName", "А");
console.log("имя до blur: " + msg("fullName"));
leave("fullName");
console.log("имя после blur: " + msg("fullName"));
typeInto("fullName", "Али");
console.log("имя после правки: " + msg("fullName"));

typeInto("email", "ali@");
leave("email");
console.log("email: " + msg("email"));
typeInto("email", "ali@mail.tj");
console.log("email после правки: " + msg("email"));

typeInto("password", "abcdefgh");
leave("password");
console.log("пароль 1: " + msg("password"));
typeInto("password", "abc");
console.log("пароль 2: " + msg("password"));
typeInto("password", "abcdefg1");
console.log("пароль 3: " + msg("password"));

имя до blur: ok
имя после blur: Имя — минимум 2 буквы
имя после правки: ok
email: Введите email в формате name@mail.tj
email после правки: ok
пароль 1: Добавьте хотя бы одну цифру
пароль 2: Пароль — минимум 8 символов
пароль 3: ok

<form id="reg" novalidate>
  <div class="field">
    <label for="fullName">Имя</label>
    <input id="fullName" name="fullName" autocomplete="off">
    <span class="error" data-error="fullName"></span>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="off">
    <span class="error" data-error="email"></span>
  </div>
  <div class="field">
    <label for="password">Пароль</label>
    <input id="password" name="password" type="password">
    <span class="error" data-error="password"></span>
  </div>
  <div class="field">
    <label for="confirm">Повторите пароль</label>
    <input id="confirm" name="confirm" type="password">
    <span class="error" data-error="confirm"></span>
  </div>
  <button>Создать аккаунт</button>
</form>

form { display: grid; gap: 12px; max-width: 340px; }
.field { display: grid; gap: 4px; }
label { font-size: 14px; font-weight: 600; }
input, button { padding: 8px 10px; font: inherit; border: 1px solid #b8c0cc; border-radius: 8px; }
button { background: #1d9a6c; color: #fff; border-color: transparent; cursor: pointer; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }

const form = document.querySelector("#reg");
const touched = {};

const validators = {
  fullName(value) {
    return value.trim().length < 2 ? "Имя — минимум 2 буквы" : "";
  },
  email(value) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()) ? "" : "Введите email в формате name@mail.tj";
  },
  password(value) {
    if (value.length < 8) return "Пароль — минимум 8 символов";
    if (!/\d/.test(value)) return "Добавьте хотя бы одну цифру";
    return "";
  },
  // (1) confirm(value)-ро ба ин ҷо илова кунед
};

function showError(name, message) {
  const input = form.elements[name];
  form.querySelector(`[data-error="${name}"]`).textContent = message;
  input.classList.toggle("invalid", message !== "");
  input.setAttribute("aria-invalid", message ? "true" : "false");
}

function validateField(name) {
  const message = validators[name](form.elements[name].value);
  showError(name, message);
  return message === "";
}

for (const name of Object.keys(validators)) {
  const input = form.elements[name];
  input.addEventListener("blur", () => {
    touched[name] = true;
    validateField(name);
  });
  input.addEventListener("input", () => {
    if (touched[name]) validateField(name);
  });
}

// (2) ҳангоми тағйири парол confirm-ро аз нав санҷед, агар touched.confirm


// (3) коркардкунандаи submit
form.addEventListener("submit", (event) => {
});

// Қуттии санҷиш ирсоли воқеии шаклро манъ мекунад, бинобар ин клики тугмаро дастӣ ба submit табдил медиҳем
// (дар саҳифаи оддӣ ин иловагӣ лозим нест)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  form.dispatchEvent(new Event("submit", { cancelable: true }));
});

// ---- санҷиш (тағйир надиҳед) ----
function typeInto(name, value) {
  const field = form.elements[name];
  field.value = value;
  field.dispatchEvent(new Event("input", { bubbles: true }));
}
function msg(name) {
  return form.querySelector(`[data-error="${name}"]`).textContent || "ok";
}

typeInto("fullName", "Мадина");
typeInto("email", "madina@mail.tj");
typeInto("password", "qwerty12");
typeInto("confirm", "qwerty1");
form.dispatchEvent(new Event("submit", { cancelable: true }));
console.log("повтор: " + msg("confirm"));
typeInto("confirm", "qwerty12");
console.log("повтор после правки: " + msg("confirm"));
typeInto("password", "qwerty99");
console.log("после смены пароля: " + msg("confirm"));
typeInto("confirm", "qwerty99");
form.dispatchEvent(new Event("submit", { cancelable: true }));

повтор: Пароли не совпадают
повтор после правки: ok
после смены пароля: Пароли не совпадают
Регистрация: Мадина, madina@mail.tj

const form = document.querySelector("#reg");
const touched = {};

const validators = {
  fullName(value) {
    return value.trim().length < 2 ? "Имя — минимум 2 буквы" : "";
  },
  email(value) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()) ? "" : "Введите email в формате name@mail.tj";
  },
  password(value) {
    if (value.length < 8) return "Пароль — минимум 8 символов";
    if (!/\d/.test(value)) return "Добавьте хотя бы одну цифру";
    return "";
  },
  confirm(value) {
    return value === form.elements.password.value ? "" : "Пароли не совпадают";
  },
};

function showError(name, message) {
  const input = form.elements[name];
  form.querySelector(`[data-error="${name}"]`).textContent = message;
  input.classList.toggle("invalid", message !== "");
  input.setAttribute("aria-invalid", message ? "true" : "false");
}

function validateField(name) {
  const message = validators[name](form.elements[name].value);
  showError(name, message);
  return message === "";
}

for (const name of Object.keys(validators)) {
  const input = form.elements[name];
  input.addEventListener("blur", () => {
    touched[name] = true;
    validateField(name);
  });
  input.addEventListener("input", () => {
    if (touched[name]) validateField(name);
  });
}

form.elements.password.addEventListener("input", () => {
  if (touched.confirm) validateField("confirm");
});

form.addEventListener("submit", (event) => {
  event.preventDefault();
  let firstBad = null;
  for (const name of Object.keys(validators)) {
    touched[name] = true;
    if (!validateField(name) && !firstBad) firstBad = form.elements[name];
  }
  if (firstBad) {
    firstBad.focus();
    return;
  }
  const data = Object.fromEntries(new FormData(form));
  console.log(`Регистрация: ${data.fullName}, ${data.email}`);
});

// Қуттии санҷиш ирсоли воқеии шаклро манъ мекунад, бинобар ин клики тугмаро дастӣ ба submit табдил медиҳем
// (дар саҳифаи оддӣ ин иловагӣ лозим нест)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  form.dispatchEvent(new Event("submit", { cancelable: true }));
});

★ Вазифаи хонагӣ: шакл аз 6 майдон

Шакли сабти номро ба курси «Frontend + AI» бо шаш майдон, санҷиши пурра ва матнҳои фаҳмои хатоҳо созед. Аз кори синфӣ оғоз кунед: он аллакай скелет дорад, шумо бояд онро васеъ кунед ва ба натиҷаи озода расонед.

Майдонҳои шакл

Чӣ бояд кор кунад

• ☐ Аломатгузорӣ: form novalidate, дар ҳар майдон label, name ва type-и дуруст (tel, email, password, checkbox) ҳаст.
• ☐ Ҳар санҷанда — функсияи алоҳидаи «қимат → матни хато ё сатри холӣ».
• ☐ Санҷиши зинда аз рӯи нақшаи «touched»: хато баъди баромадан аз майдон пайдо мешавад ва ҳангоми ислоҳ фавран нест мешавад.
• ☐ Ҳангоми ирсол ҳамаи майдонҳо санҷида мешаванд, фокус ба аввалин хатодор гузошта мешавад.
• ☐ Хатоҳо дар зери майдонҳо нишон дода мешаванд (textContent), майдон чаҳорчӯбаи сурх ва aria-invalid дорад.
• ☐ Ҳангоми муваффақият: дар саҳифа паёми «Ташаккур, Ном! Мо бо шумо бо рақами ... тамос мегирем» пайдо мешавад, маълумот тавассути FormData ҷамъ шудааст, шакл барқарор мешавад. Парол дар ҳеҷ ҷо нишон дода намешавад ва ба консол чоп намегардад.
• ☐ Бонус: тугмаи «Нишон додани парол» ва ҳисобкунаки аломатҳои мондааст — ҳар кадоме аз онҳо.

Чиро супорид

1. Истинод ба репозиторийи GitHub (папкаи lesson-10 бо файлҳои index.html, style.css, script.js) ё архив ба гурӯҳи Telegram.
2. Се скриншот: ирсоли холӣ (ҳамаи хатоҳо), шакли қисман пуршуда, ирсоли бомуваффақият.
3. Файли tests.md: ҷадвал аз ҳадди ақал 10 қимати санҷишӣ барои телефон ва email — «қимат → натиҷаи интизоршаванда» — ва қайд, ки коди шумо кадомашро гузашт.
4. Агар шумо ЗС-ро истифода кардед: дар README се сатр — маҳз чиро хоҳиш кардед, чиро гирифтед, чиро бо даст ислоҳ кардед. Ҳангоми санҷиш омӯзгор метавонад хоҳиш кунад, ки ҳар сатрро шарҳ диҳед.

Чӣ тавр баҳо медиҳем (0–10)