Киргизүү маска жана UX-форма

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

1. Жардам бергиле, жазалабагыла. Маска киргизүүнү жетектейт жана каталарды азайтат, бирок басып чыгарууга жана киргизүүгө бөгөт койбойт.
2. Маалыматтар ≠ чагылдырылат. "Чийки" нормалдаштырылган баалуулуктарды сактайбыз, UIде гана форматтайбыз.
3. Болжолдуу курсор. Ар бир автоматтык алмаштыруу "секирип" caret жана undo/redo сындырбайт.
4. Жергиликтүү жана түзмөк. Клавиатуралар, бөлгүчтөр, календар жана валюталар - аймак жана платформа боюнча.
5. Жеткиликтүүлүк жана купуялуулук. Текст + сөлөкөт/түс; сезимтал талааларды жаап-жашыруу, бирок сырсөз менеджерлерине/авто толтурууга тоскоолдук кылбоо.

2) Маска ылайыктуу болгондо (жана жок болгондо)

• Туруктуу түзүлүшү менен форматтар: телефон, IBAN, PAN (карталар), CVC, дата, убакыт, индекс, OTP.
• Бөлгүчтөрү бар акчалай суммалар (басып чыгарууда - "таза" кириш, блор менен - формат).
• Коддор (реф. коддору, промо), белгиленген узундуктары.

• Аттары/даректери/Электрондук почта (маска уруксат берилген белгилерди/тилдерди чектейт).
• Татаал бош талаалар (комментарийлер, компаниялардын аталыштары).
• Потенциалдуу белгисиз формат менен киргизүү (өлкөсүз эл аралык номерлер).

3) Маска vs autoformat vs валидация

Маска - структуранын "учуу" (кашаалар, дефистер); кириш/салууну бузбашы керек.
Autoformat - блур/фокусту жоготууда колдонулат (миңдеген, IBAN боштуктары).
Валидация - туура логика (узундугу, контролдук суммасы), "blur" же "submit" кийин каталарды көрсөтүү.

Эреже: маска валидацияны алмаштырбайт жана автоформат киргизилген нерсенин маанисин өзгөртпөшү керек.

4) Клавиатура жана HTML атрибуттары

5) Карет, копипаст жана нормалдаштыруу

Caret сындырууга болбойт: символдорду автоматтык түрдө киргизүүдө (боштуктар/кашаалар) курсордун позициясын тууралаңыз.
Copipast: киргенде боштуктарды/дефистерди тазалоо → валидация → форматтоо менен көрсөтүү.
Нормалдаштыруу: тримминг, "кыйшык" белгилерди алмаштыруу ('O' → '0' мүмкүн эмес!), IBAN үчүн жогорку реестрге которуу, сактоо боюнча бирдиктүү дата форматы (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) Сандар, валюталар жана локалдар

"Кантип басып чыгарылат" (бөлгүч катары ',' же '.'), minor units (тыйын/цент) сактоо.
Локал боюнча көрсөтүү (миңдеген топтоо) блюр/сабмиттен кийин; түзөтүү үчүн "чийки" маанисин көрсөтүү.
Валютаны так көрсөтүп, тактыкты бекитиңиз (мисалы, 2 белги).

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) Даталар жана убакыт

Эгерде жергиликтүү пикерлер платформаларда ыңгайсыз/ар түрдүү болсо, 'DD маскасы менен текст талаасын колдонуңуз. MM. YYYY ', бирок ISO' YYYY-MM-DD 'сактоо.
Даталардын чындыгын текшерүү (29. 02, диапазондор), таймзондор - серверде.
"Бүгүн", "Азыр", "Тазалоо" баскычтарын кошуңуз.

8) Телефондор жана өлкөлөр

Эки талаа: өлкө (+ код) жана саны же тандалган өлкө боюнча "акылдуу" маска.
Толук '+ CC...' киргизгенде өлкөнү автоматтык түрдө толтуруңуз.
E.164 сактоо ('+ CCXXXXXXXXX'), боштуктар менен жергиликтүү көрсөтүү.

9) Төлөм маалыматтар: PAN/IBAN/CVC/EXP

PAN: топтоо 4-4-4-4/4; маанисинде - сандар гана; Luhn-check; PAN менен эч кандай логдор/аналитика.
CVC:' password' -стили (жашыруун), 'autocomplete =" cc-csc"', долбоорго сакталбайт.
EXP: 'MM/YY', auto-insert '/' 2 сандар кийин, 01-12 диапазонун текшерүү жана акылга сыярлык жыл.
IBAN: upper-case, бош гана UI; өлкө боюнча узундугун жана контролдук суммасын текшерүү.

10) OTR/тастыктоо коду

6 (же N) Auto-фокус жана auto-өтүү менен уячалар, буфер киргизүү бүт кодду тааныйт.
' autocomplete =" one-time-code"', уюлдук телефондордо - SMSтен авто айыктыруу.
split талаалар жок Backup киргизүү (бир талаа) - скринридерлер үчүн.

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

11) Маска жана a11y

Лейбл милдеттүү ('<label for>'), placeholder - алмаштыруу эмес, мисал.
жакын эрежени түшүндүрүп: мисал менен helper text ("Формат: + CC XXX XXX-XX-XX").
Каталарды 'aria-describedby', критикалык 'role =' alert 'аркылуу байланыштырыңыз.
Тексттин жана контурлардын контрастын ≥ AA, ': focus-visible' жашырбайт.

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

Сезгич талаалар: Логин жок, RUM жазуу эмес, долбоорлор (PAN, CVC, паспорт) сактоо эмес.
Маскалар жана форматтоо эсептин аныктыгын ачыкка чыгарбашы керек ("Эгер электрондук почта катталса..." - нейтралдуу формулировка).
маанилүү submits (төлөм/коюм) үчүн Dempotentity жана retry.

13) Form жүрүм-туруму жана аткаруу

Дебаунс асинхрондук текшерүүлөр (250-400 ms), көрүнгөн индикация "текшерүү"....
Бир талаа үчүн бүт экранды бөгөттөп жок; жергиликтүү spinner/скелет.
Батчите DOM өзгөртүү; гана жандандыруу 'transform/opacity'.
Мобилдик - клавиатура пайда болгондо "секирип" качуу (safe-area, viewport meta).

14) Код-сниппеттер

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) Дизайн системасы токендери (мисал)

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 өзгөчөлүктөрү

Төлөмдөр/корутундулар: жумшак маскалар менен PAN/IBAN/amount; катуу окшоштук жана сезгич талаалардын логдору жоктугу; комиссиялар жана мөөнөттөр жөнүндө.
KYC: даталар үчүн маска, паспорт номерлери (жок "катуу" чыпкалоо - ар кандай түрдө эсепке алуу), өлчөмү/түрү, алдын ала текшерүү.
Лимиттер жана жоопкерчиликтүү оюн: түшүнүктүү суммалар/мезгилдер (күндөр/жумалар/айлар), helpers жакын, контраст AAA.
Коюмдар: сумманы тез киргизүү (пресет баскычтары + талаа), фокуста "чийки" сан, блор локалдык формат менен; ", "...../кош бөлгүч.

17) Анти-үлгүлөрү

Жол берилген белгилер/киргизүү тыюу катуу маскалар.
Автоформатта секирүү; агып/undo.
Placeholder ордуна лейбл.
Валютаны баалуулуктардын ичине автоматтык кошуу (копипастты бузат).
Каталар "ар бир белгиге" дебаунсуз.
Локалдык көз карандысыз форматтар сактоодо (ISO/сандарды сактаңыз).
PAN/паспорт номерлери логин жана "өтө чынчыл" четке себептерин көрсөтүү.

18) Метрика жана эксперименттер

талаалар боюнча ката (чейин/кийин маска).
Убакыт-to-Complete формалары жана кайра жөнөтүү.
ийгиликсиз киргизүү үлүшү (копипаст) жана "кайра" (undo).
CTR учтары/мисалдар, авто толуктоолордун үлүшү.
Abandon rate төлөм баскычында/CUS.

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

Киргизүү жана caret

• Буферден киргизүү бузулбайт, боштуктар/сызыктар туура тазаланат.
• Caret автоматтык түрдө кийин алдын ала бойдон калууда.

Жергиликтүү жана формат

• Суммалар жол ', '/'.'; minor units сактоо.
• Даталар парс жана тастыкталган; ISO сактоо.

A11y

• Лейблдер жана 'aria-describedby' байланыштуу; 'role =' alert 'критикалык үчүн.
• Контраст жана фокус шакек AA ылайык келет.

Коопсуздук

• Сезгич талаалар кирбейт/кэш жок.
• Маанилүү кадамдарда Idempotentity жана retry.

UX

• Placeholder - мисалы, эч кандай белги; helper жакын.
• Маска мобилдик басып тоскоолдук кылбайт; туура клавиатура ('inputmode').

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

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.
Маска токендери (узундугу/үлгүлөрү), caret/киргизүү эрежелери, сандарды/күндөрдү локализациялоо.
Купуялык боюнча Гайддар (эмне логин жок), жеткиликтүүлүгү жана autoformat vs блюр.
"Do/Don 't" чейин/кийин реалдуу мисалдар жана көрсөткүчтөр менен.

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

Маскалар жана формалар кирүүнү тездетип, маалыматтарды таза кармап, тоскоолдук кылбаганда жакшы. Кылдаттык менен форматтаңыз, кире бериште нормалдаштырыңыз, туруктуу түрдө сактаңыз, жергиликтүү жерлерди жана жеткиликтүүлүктү эске алыңыз. Анда формалар тез жана түшүнүктүү болуп калат - өзгөчө сезгич төлөм сценарийлеринде, KYC жана коюмдарда.