Орнотулган валидация жана UX каталар

1) Принциптер

1. Алдын ала жардам, жаза эмес. туура киргизүү үчүн кантип көрсөтүп, ката чейин.
2. Маалыматтарды жоготпоо. Ар кандай ката киргизилген жок кылбайт; "Жокко чыгаруу "/" Кайталоо ".
3. Көрсөтүү учуру.

Киргенге чейин: helper text (эрежелер жана мисалдар).
Убакыттын өтүшү менен: жумшак хинта/маска/Auto алмаштыруу.
Андан кийин (blur/submit): "кантип оңдоо керек" көрсөтмөсү менен так ката.
4. Көңүл үнөмдөө. Бир билдирүү - бир себеп жана аракет.
5. Жеткиликтүүлүк. Текст + сөлөкөт/түс, АРИА аркылуу талаа менен байланыш, биринчи ката талаага басым.

2) валидация катмарлары

Кардар синхрондуу: формат, узундугу, милдеттүү, маска. Тез жана арзан.
Кардар асинхрондук: Логин уникалдуулугу, BIN/IBAN текшерүү, API-көмөк. Дебаунс менен.
Сервердик: бизнес-эрежелер, лимиттер, тобокелдик-скоринг, авторизация/укуктар. Акыркы инстанциядагы чындык.
Эреже: идеалдуу кардар текшерүү менен да сервер акыркы текстти тастыктайт жана түзөт.

3) Таймингдер жана Дебаунс

blur → заматта Фидбек боюнча validation ≤ 100 ms.
Асинхрондук текшерүү - кирүүнү токтоткондон кийин 250-400 мс дебаунс.
Ийгиликтин ырастоосу - кыска ("Ок") же жашыл сөлөкөт; салют жок.
'submit' каталардын тизмесин көрсөтүп, биринчисине көңүл бурабыз.

js const debounce = (fn, ms=300)=>{let t;return (...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}

4) Copyright каталар

Шаблон: себеп → кантип оңдоо керек → альтернатива (бар болсо).

Жакшы: "Пароль 8 белгиден кыска. Дагы символдорду кошуңуз же сөз айкашын колдонуңуз".
Жакшы: "IBAN туура эмес көрүнөт. узундугу жана белгилерин текшерүү: A-Z, 0-9".
Жаман: "Туура эмес киргизүү".
Колдонуучуну күнөөлөбөңүз; жаргондордон жана коддордон алыс болуңуз.
Сезгич аймактарда (төлөмдөр/КУС) коопсуздукту ачып берген деталдардан качабыз.

5) Билдирүүлөрдү көрсөтүү үлгүлөрү

5. 1 Талаада (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Кыскача, так; узак абзацтары жок.
Түс + сөлөкөт, бирок мааниси текстте.

5. 2 Төмөнкү түрү (summary)

Бардык каталардын тизмеси.
"Катага өтүү" баскычы/пункт боюнча чыкылдатуу фокусту жылдырат.

5. 3 жөнөтүү учурунда

Кайра басууга бөгөт коюу (state 'busy').
Тайм менен 3-5 с - "Тастыктоону күтөбүз"... коопсуз кайталоо менен.

6) Masks, Auto жардам жана корректорлор

Маскалар киргизүү/өзгөртүүгө тоскоол болбошу керек. Эркин кирүүгө уруксат бериңиз, капоттун астында нормалдаштырыңыз.
Auto көмөк: "милдеттүү" бөлүгү эмес, бир көмөк катары placeholder, үлгүлөрүн көрсөтүү.
Нормалдаштыруу: trimming боштуктар, регистрлерди унификациялоо, авто-формат (мисалы, '+ 1 (___) ___ - ____') - бирок баштапкы маалыматтарда "таза" версияны сактаңыз.

7) Жеткиликтүүлүк (A11y)

Байланыш: 'label' 'input', каталар 'aria-describedby'.
Критикалык - 'role = "alert"', маалыматтык - 'role = "status"'.
Фокусту жаңылыш талаага кайтарабыз, ': focus-visible' көрүп жатабыз.
Контраст текст/иконалар ≥ AA; мааниси түсүнө гана көз каранды эмес.

html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id="email-help">Например: user@domain.tld</small>
<p id="email-err" class="field-error" role="alert" hidden>Проверьте формат email</p>

8) Эл аралык форматтар жана локалдаштыруу

Аттары/даректери: ар кандай алфавиттерге, узундуктарга, апострофтарга, дефистерге жол бериңиз.
Даталар/валюталар/номерлер: жергиликтүү киргизүү форматтарын жана катуу ички сактоо структураларын колдонуу (ISO/центтердин саны).
Тел: эл аралык түрдө киргизүү '+ CC', өлкө боюнча Auto жардам.
Билдирүү тили: кыска, маданий жактан нейтралдуу; жол узундугу + 20-30% койду.

9) Коопсуздук жана купуялык

Аккаунт бар/жок экенин көрсөтпөңүз - жалпы текст: "Эгер электрондук почта катталса, биз кат жөнөтөбүз".
сезимтал маалыматтарды жашыруу (PAN, паспорт).
Критикалык кадамдарда (коюм/төлөм) демпотенттикти жана "коопсуз кайталоолорду" колдонуңуз.
Логи - кабарларда PII жок байланыштын ID менен.

10) прогресс сактоо

Автосейв долбоору (жергиликтүү/серверде).
Ката кетирилген учурда - форма толтурулган бойдон калат; кийин кайталоо сунушталат.
Көп баскычтуу процесстерде (KYC) - аяктаган кадамдарды сактаңыз.

11) Асинхрондук валидация

Дебаунс 250-400 мс; экрандын баарын бөгөттөбөстөн, талаанын жанында "текшерип" жатабыз.
Так көрсөткүчү ийгилик/ийгиликсиздик жок "тартылуу" макети.
Убакыт → "Текшерүү мүмкүн эмес. тобокелдик менен улантуу?" (эгер жол берилсе) же "Кайталоо".

js const checkUsername = debounce(async (v)=>{
state.usernameChecking = true;
const ok = await api.unique('username', v).catch(()=>null);
state.usernameChecking = false;
state.usernameValid = ok === true;
}, 300);

12) Төлөм формалары жана KYC (өзгөчөлүгү)

Карталар: PAN форматы, мөөнөтү, CVC - киргизүү боюнча валидация; каталар - банк тарабынан четке кагуунун себебин ачыктабастан.
A2A/капчыктар: өлкө/лимиттер боюнча жол берилгендигин текшерүү, комиссиялар/мөөнөттөр жөнүндө так тексттер.
KYC: сүрөттөр/документтер үчүн кадам талаптар, алдын ала текшерүү, өлчөмү/түрү, текшерүү мөөнөтү, купуялык.
Жоопкерчиликтүү оюн: билдирүүлөр нейтралдуу, "Лимитти орнотуу "/" Жардам "аракеттери менен.

13) Антипаттерндер

Дебаунсуз "ар бир символго" каталарды көрсөтүү.
Ката болгондо форманы кайра жүктөө.
Талаа/эреже көрсөтүлбөгөн "Туура эмес киргизүү" билдирүүсү.
Критикалык маалымат гана түс/сөлөкөт.
Бир талааны текшерүү үчүн бүт баракты бөгөттөө.
Тармак үзгүлтүккө учураганда оффлайн режиминин жана кайталоолордун жоктугу.

14) Дизайн системасы токендери (мисал)

json
{
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100,
"asyncTimeoutMs": 5000,
"summaryMaxItems": 6
},
"a11y": {
"useAriaDescribedby": true,
"errorRole": "alert",
"statusRole": "status"
},
"visual": {
"fieldGap": 8,
"iconSize": 16,
"borderRadius": 10
}
}

15) ишке ашыруу Snippets

js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)          "Проверьте формат email"
};
async function validateEmail(v){
const fmt = rules.email(v);
if (fmt!== true) return fmt;
try {
const r = await fetch(`/api/email/check?v=${encodeURIComponent(v)}`);
const { allowed } = await r.json();
return allowed? true: "Этот email недоступен. Выберите другой.";
} catch {
return "Не удалось проверить. Повторите позже.";
}
}

ts function focusFirstError() {
const err = document.querySelector('[aria-invalid="true"]');
if (err) err.focus({ preventScroll:false });
}

js const saveDraft = debounce(form => localStorage.setItem('draft', JSON.stringify(Object.fromEntries(new FormData(form)))), 500);
form.addEventListener('input', ()=>saveDraft(form));

16) Метрика жана контролдоо

Time-to-Fix (катадан оңдоого чейин).
Error rate талаалар жана себептер боюнча (формат/лимиттер/сервер).
Кайра жөнөтүү (retry success rate).
Ыргытылган формалардын үлүшү жана кадамдын тереңдиги.
Толтура учтары: CTR "Маалымат", жашыруун учтары жыштыгы.

17) QA-чек тизмеси

A11y

• Focus биринчи ката талаага барат; 'aria-describedby '/' aria-invalid' коюлган.
• Контраст ≥ AA; билдирүүлөр түсүнө гана көз каранды эмес.

Жүрүм-турум

• Дебаунс менен орнотулган валидация; каталар blur (оор маскалар тышкары) чейин пайда болот.
• submit боюнча кыскача түзүлгөн, талаалар тазаланбайт.
• Асинхрондук текшерүүлөр баракчаны бөгөттөбөйт; таймаут жана кайталоо бар.

Текст

• Себеп + кантип оңдоо керек; коддору/күнөөсү жок.
• Локализация макетин бузбайт; мисалдар актуалдуу.

Коопсуздук

• Билдирүүлөрдө PII агып кетүү жок; эсеп бар экенин ачыкка чыгарбайбыз.
• Маанилүү операциялар үчүн идемпотенттүүлүк.

18) Дизайн системасында документтер

Компоненттери: 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
Типтүү талаалар үчүн эрежелердин карталары (электрондук почта, телефон, пароль, дарек, IBAN, дата).
Гайддар дебаунс, асинхрондук текшерүү жана оффлайн жүрүм-туруму боюнча.
көп каталар жана мисалдар үчүн текст үлгүлөрү "чейин/кийин".

Кыскача резюме

Камтылган валидация - бул алдын ала жардам, так көрсөтмөлөр жана маалыматтарга кылдаттык менен мамиле кылуу жөнүндө. Жергиликтүү жана серверде текшерүү, конкреттүү иш-аракеттер менен туура учурда каталарды көрсөтүү, жеткиликтүүлүктү жана купуялуулукту урматтоо, прогрессти сактап калуу жана дебаунду колдонуу. Ошентип, формалар достук болуп, каталар тез жана туура болот.