Kirish va UX shakl niqoblari

1) Qonunning

1. Yordam berish, jazolamaslik. Maska kiritishni boshqaradi va xatolarni kamaytiradi, lekin bosib chiqarish va qoʻyishni bloklamaydi.
2. Maʼlumotlar ≠ koʻrsatiladi. Biz «xom» me’yorlashtirilgan qiymatlarni saqlaymiz, faqat UI formatida.
3. Bashorat qilinadigan kursor. Har qanday avtomatik almashtirish caret «sakramaydi» va undo/redo buzilmaydi.
4. Lokal va qurilma. Klaviaturalar, ajratgichlar, taqvim va valyutalar - mintaqa va platforma bo’yicha.
5. Foydalanish imkoniyati va maxfiyligi. Matn + ikonka/rang; sezgir maydonlarni yashiramiz, lekin parol/avtomatik toʻldirish menejerlariga xalaqit bermaymiz.

2) Niqob o’rinli bo’lsa (va bo’lmasa)

• Tuzilishi barqaror formatlar: telefon, IBAN, PAN (xaritalar), CVC, sana, vaqt, indeks, OTP.
• Bo’lingan pul summalari (bosilganda - «sof» kirish, blyurada - format).
• Kodlar (ref. kodlar, promo), belgilangan uzunliklar.

• Nomlar/manzillar/Email (maska ruxsat etilgan belgilarni/tillarni cheklaydi).
• Murakkab bo’sh maydonlar (sharhlar, kompaniya nomlari).
• Potentsial nomaʼlum formatdagi kirish (mamlakatsiz xalqaro raqamlar).

3) Niqob vs avtoformat vs validatsiya

Niqob - «uchish» tuzilmasi (qavslar, defislar); kirish/qoʻyishni buzmasligi kerak.
Avtoformat - fokusni blyur/yo’qotishda qo’llaymiz (minglab, IBAN bo’shliqlari).
Validatsiya - to’g "rilik mantig’i (uzunligi, nazorat summasi), xatolarni" blur "yoki" submit "dan keyin ko’rsatish.

Qoida: niqob validatsiyani almashtirmaydi va avtoformat kiritilganning maʼnosini oʻzgartirmasligi kerak.

4) Klaviatura va HTML atributlari

5) Karet, kopipast va normallashtirish

Caretni buzmang: Belgilarni (boʻshliqlar/qavslar) avto qoʻyishda kursorning oʻrnini oʻzgartiring.
Kopipast: qoʻyishda boʻshliqlar/tirnoqlardan tozalang → validatsiya → formatlash bilan koʻrsating.
Normallashtirish: trimming, «egri» belgilarni almashtirish (’O’→’0’mumkin emas!), IBAN uchun yuqori registrga tarjima qilish, ombordagi yagona sana formati (ISO).

js const clean = s => s. replace(/[^\da-zA-Z]/g,'');
const normalizePAN = s => clean(s). slice (0.19) ;//no spaces/hyphens const normalizeIBAN = s => clean (s). toUpperCase();   // A–Z0–9

6) Raqamlar, valyutalar va lokallar

«Qanday bosiladi» (ruxsatnoma’,’yoki’.’ajratuvchi sifatida), minor units (tiyin/sent) da saqlash.
Sabmitdan so’ng/blyurda lokal ko’rsatish (minglarni guruhlash); fokusda tahrirlash qulayligi uchun «xom» qiymatni koʻrsating.
Valyutani aniq ko’rsating va aniqlikni belgilang (masalan, 2 ta belgi).

js function parseMoney(input) {
//resolve both comma and period as decimal const s = input. replace(/\s/g,''). replace(',', '.');
const num = Number(s);
if (Number. isNaN(num)) return null;
return Math. round(num 100); // cents
}

function formatMoney(cents, locale='ru-RU', currency='RUB') {
return (cents/100). toLocaleString(locale, { style:'currency', currency });
}

7) Sanalar va vaqt

Agar mahalliy pikerlar noqulay/turli platformalarda boʻlsa,’DD niqobli matn maydonidan foydalaning. MM. YYYY’, lekin ISO’YYYY-MM-DD’saqlang.
Haqiqatni tekshirish (29. 02, diapazonlar), taymzonlar - serverda.
«Bugun», «Hozir», «Tozalash» tugmalarini qoʻshing.

8) Telefonlar va mamlakatlar

Ikkita maydon: mamlakat (+ kod) va raqam yoki tanlangan mamlakat boʻyicha «aqlli» niqob.
Toʻliq’+ CC...’qoʻyilganda mamlakatni avtomatik toʻldiring.
E.164 saqlang (’+ CCXXXXXXXX’).

9) To’lov rekvizitlari: PAN/IBAN/CVC/EXP

PAN: 4-4-4-4/4 turkumi; ma’noda - faqat raqamlar; Luhn-check; PAN bilan hech qanday loglar/tahlillar mavjud emas.
CVC:’password’-stil (yashirin),’autocomplete =’cc-csc’’, loyihaga saqlanmaydi.
EXP:’MM/YY’, avto-qo’shimchalar ’/’ 2 raqamdan keyin, 01-12 oralig’ini va oqilona yilni tekshirish.
IBAN: upper-case, faqatgina UI bo’shliqlar; mamlakat bo’yicha uzunligini va nazorat summasini tekshirish.

10) OTR/tasdiqlash kodi

Avtofokus va avto oʻtish bilan 6 (yoki N) katak, buferdan qoʻyish butun kodni taniydi.
’ autocomplete =» one-time-code»’, mobil telefonda - SMSdan avtomatik davolash.
Split maydonlarsiz bekap-kirish (bitta maydon) - skrinriderlar uchun.

html
<div class="otp" role="group" aria-label="Код из SMS">
<input inputmode="numeric" maxlength="1">
<input inputmode="numeric" maxlength="1">
<!-- … -->
</div>

11) Niqoblar va a11y

Yorliq majburiy (’<label for>’), placeholder - oʻrindiq emas.
Qoidani yonma-yon tushuntiring: helper text («Format: + CC XXX XXX-XX-XX»).
Xatolarni’aria-describedby’, tanqidiy’role =’alert’orqali bogʻlang.
Matn va kontur kontrasti ≥ AA,’: focus-visible’ni yashirib boʻlmaydi.

12) Maxfiylik va xavfsizlik

Sezgir maydonlar: manzilga yozmaslik, RUMga yozmaslik, loyihalarga (PAN, CVC, pasport) saqlamaslik.
Niqoblar va formatlash hisobning haqiqiyligini oshkor qilmasligi kerak («Agar email roʻyxatdan oʻtgan boʻlsa...» - neytral formulasi).
Tanqidiy submitlar uchun idempotentlik va retry (to’lov/stavka).

13) Shakllarning xatti-harakati va unumdorligi

Asinxron tekshirishlar debaunsi (250-400 ms), ko’rinadigan indikatsiya «Tekshiramiz»....
Bitta maydon uchun butun ekranni bloklamang; lokal spinner/skelet.
DOM o’zgarishlarini qabul qiling; faqat’transform/opacity’ni jonlantiring.
Mobil telefonda klaviatura (safe-area, viewport meta) paydo boʻlganda «sakrash» dan qoching.

14) Snippet-kod

js function formatPhoneVisible(value) {
const d = value. replace(/\D/g,''). slice(0,15);
if (!d) return '';
if (d. startsWith('7')          d. startsWith('8')) {
return d. replace(/^([78])? (\d{3})(\d{3})(\d{2})(\d{2})./, '+7 ($2) $3-$4-$5');
}
// generic E.164 grouping: +CC XXX XXX XX XX return d. replace(/^(\d{1,3})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})./, (m,c1,c2,c3,c4,c5)=>
`+${c1}${c2?` ${c2}`:''}${c3?` ${c3}`:''}${c4?` ${c4}`:''}${c5?` ${c5}`:''}`.trim());
}

const input = document. querySelector('#phone');
input. addEventListener('input', e => {
const raw = e. target. value;
const pos = e. target. selectionStart;
const digitsBefore = raw. slice(0,pos). replace(/\D/g,''). length;
const cleaned = raw. replace(/[^\d+]/g,'');
const visible = formatPhoneVisible(cleaned);
e. target. value = visible;
// restore caret by counting digits let p = 0, count = 0;
while (p < e. target. value. length && count < digitsBefore) { if (/\d/.test(e. target. value[p])) count++; p++; }
e. target. setSelectionRange(p, p);
});

js const amount = document. getElementById('amount');
let cents = null;

amount. addEventListener('focus', () => {
if (cents!=null) amount. value = String(cents/100). replace('.', ',');
});
amount. addEventListener('blur', () => {
const v = parseMoney(amount. value) ;//from section 6 if (v = = null) return; cents = v;
amount. value = formatMoney(cents, 'ru-RU', 'RUB');
});

js const iban = document. getElementById('iban');
iban. addEventListener('input', () => iban. value = iban. value. toUpperCase());
iban. addEventListener('blur', () => {
const raw = normalizeIBAN(iban. value);
iban. dataset. raw = raw ;//for iban submission. value = raw. replace(/(.{4})/g,'$1 '). trim () ;//view only
});

15) Dizayn-tizim tokenlari (misol)

json
{
"input": {
"radius": 10,
"height": { "sm": 36, "md": 40, "lg": 48 },
"gap": 8,
"icon": 16
},
"mask": {
"debounceMs": 300,
"otpLength": 6,
"moneyPrecision": 2,
"phoneMaxDigits": 15
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

css
.input { height:40px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }
.otp input { width:40px; text-align:center; }

16) iGaming xususiyatlari

To’lovlar/xulosalar: yumshoq niqobli PAN/IBAN/amount; qattiq idempotentlik va sezgir maydonlarning log’lari yo’qligi; komissiyalar va muddatlar to’g "risidagi maslahatlar.
KYC: sana, pasport raqamlari uchun niqoblar («qattiq» filtrlashsiz - turli formatdagi hisoblar), faylning o’lchami/turi, oldindan ko’rish.
Limitlar va mas’uliyatli o’yin: tushunarli summalar/davrlar (kunlar/haftalar/oylar), xelperlar yonma-yon, kontrast AAA.
Stavkalar: summani tezda kiritish (preseta-tugmalar + maydon), fokusda «xom» son, blur bo’lganda lokal formati; «, «...../qoʻshaloq ajratuvchiga ruxsat berilmagan.

17) Anti-patternlar

Ruxsat etilgan belgilar/qoʻyishni taqiqlovchi qattiq niqoblar.
Avtoformatda sakraydigan caret; tanlash/undo yo’qolishi.
Yorliq oʻrniga Placeholder.
Qiymatning ichiga valyutani avtomatik qoʻshish (kopipastni buzadi).
Har bir belgi uchun debaunsiz xatolar.
Ombordagi mustaqil formatlar (ISO/sonlarni saqlang).
PAN/pasport raqamlarini loglash va rad etishning «juda halol» sabablarini koʻrsatish.

18) Metrika va eksperimentlar

Error rate (maskadan oldin/keyin).
Time-to-Complete shakllari va qayta jo’natish.
Muvaffaqiyatsiz qo’shimchalar (kopipast) va «qaytarmalar» (undo) ulushi.
CTR maslahatlar/misollar, avto toʻldirishlar ulushi.
Abandon rate to’lov/KS bosqichida.

19) QA-chek-varaq

Introduction & caret

• Buferdan qoʻyish buzilmaydi, boʻshliqlar/defislar toʻgʻri tozalanadi.
• Caret avtoformatdan keyin oldindan aytib bo’lmaydi.

Lokal va format

• Summalar’, ’/’.’; minor units da saqlash.
• Sanalar parchit va validatsiya qilinadi; ISOda saqlash.

A11y

• Yorliqlar va’aria-describedby’ulangan;’role =’alert’tanqidiy uchun.
• Kontrast va fokus halqa AA ga mos keladi.

Xavfsizlik

• Sezgir maydonlar kodlanmaydi/keshlanmaydi.
• Idempotentlik va retry tanqidiy qadamlarda.

UX

• Placeholder - misol, yorliq emas; helper yaqin.
• Niqoblar mobil telefonda chop etilishiga xalaqit bermaydi; toʻgʻri klaviatura (’inputmode’).

20) Dizayn-tizimdagi hujjatlar

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.
Niqob tokenlari (uzunlik/shablon), caret/qo’shimchalar qoidalari, sonlar/sanalar lokalizatsiyasi.
Gaidlarni maxfiylik bo’yicha (nimani izohlamaslik kerak), foydalanish imkoniyati va avtoformat bo’yicha vs blyur.

«Do/Don’t» haqiqiy misollar va ko’rsatkichlar bilan

Qisqacha xulosa

Niqoblar va shakllar kiritishni tezlashtirganda yaxshi bo’ladi, ma’lumotlarni toza saqlaydi va ularga xalaqit bermaydi. Ehtiyotkorlik bilan formatlang, kiraverishda normallashtiring, barqaror shakllarda saqlang, lokalizatsiyalar va mavjudlikni hisobga oling. Shunda shakllar tez va tushunarli bo’ladi - ayniqsa, to’lovlar, KYC va stavkalarning sezgir stsenariylarida.