Ներկառուցված վալիդացիա և UX սխալներ

1) Սկզբունքներ

1. Նախատիպային օգնություն, պատիժ չէ։ Ցույց տանք, թե ինչպես ճիշտ կերպով կիրառել սխալները։

2. Մի կորցրեք տվյալները։ Ցանկացած սխալ չի ոչնչացնում ներդրվածը։ «Աջակցել «/» Կրկնել »։

3. Ցուցադրման պահը։

Մինչև մուտքագրումը 'helper no (կանոններ և օրինակներ)։

Ժամանակի ընթացքում 'փափուկ հինտներ/դիմակ/մեքենա։

Հետո (blur/intit) 'հստակ սխալ «ինչպես շտկել» հրահանգով։

4. Ուշադրության խնայողություն։ Մի հաղորդագրություն է պատճառը և գործողությունը։

5. Հասանելիություն։ Տեքստը + իկոնկա/գույն, կապ դաշտի հետ ARIA-ի միջոցով, առաջին սխալ դաշտը։

2) Վալիդացիայի շերտերը

Հաճախորդի սինխրոն 'ձևաչափ, երկարություն, պարտավորություն, դիմակ։ Արագ և կատարյալ։

Հաճախորդի ասինխրոն 'լոգինի յուրացում, ստուգում BIN/IBAN, API հուշումներ։ Դեբաունսի հետ։

Սերվերները 'բիզնես կանոնները, սահմանները, ռիսկային սկորինգը, հեղինակային իրավունքը/իրավունքները։ Վերջին մրցույթի ճշմարտությունը։

Կանոն 'նույնիսկ կատարյալ հաճախորդների ստուգման դեպքում սերվերը հաստատում և ձևավորում է վերջնական տեքստը։

3) Թայմինգները և դեբաունսը

Blur-ի վալիդացիան կատարվում է ակնթարթային ֆիբեկով 100 մզ։

Ասինխրոնի ստուգումը 250-400 մսի դեբաունս է շահագործման դադարելուց հետո։

Հաջողության ապացույցը լաքոնիկ է («Ok») կամ կանաչ իկոն; առանց «բարևների»։

«Windit» -ի վրա մենք ցույց ենք տալիս սխալների ցանկը և շարժենք առաջինը։

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

4) Սխալների կոպիրայթինգը

Ձևաչափը 'պատճառն այն է, թե ինչպես շտկել ռուսական այլընտրանքը (եթե կա)։

Լավ, "Գաղտնաբառը կարճ է, քան 8 նիշ։ Ավելացրեք նաև խորհրդանիշներ կամ օգտագործեք արտահայտություն"։

Լավ, "IBAN-ը սխալ տեսք ունի։ Երկարությունը և խորհրդանիշները ՝ A-Z, 0-9"։

Վատ է. <<Սխալ շահագործումը>>։

Մի մեղադրեք օգտագործողին. խուսափեք ժարգոնից և ունեցվածքից։

Զգայուն գոտիներում (վճարումներ/CUS) խուսափում ենք անվտանգության բացահայտող մանրամասներից։

5) Հաղորդագրությունների ցուցադրման պատրանքները

5. 1 Դաշտի մոտ (inault)

Կարճ, կոնկրետ։ առանց երկար պարբերության։

`aria-invalid="true"`, текст в `aria-describedby`.

Գույնը + իկոնկա է, բայց իմաստը տեքստում է։

5. 2 Ձևի տակ (summary)

Բոլոր սխալների ցանկը խարիսխներով մինչև 105 մ։

«Անցնել սխալի» կոճակը/տեսահոլովակը շարժվում է ֆոկուսը։

5. 3 Ուղարկման ընթացքում

Մենք արգելափակում ենք կրկնվող սեղմումը (state 'buby')։

Թայմաուտում 3-5 s '«Սպասում ենք ապացույց»... անվտանգ խոհարարի հետ։

6) Դիմակներ, ավտոկանգառներ և ուղղումներ

Դիմակները չպետք է խառնվեն ներդիրին/խմբագրությանը։ Թույլ տվեք ազատ շահագործումը, նորմալացրեք գլխարկի տակ։

Ինքնանկարներ 'ցույց տվեք ձևաչափերի օրինակներ, placeholder որպես հուշագիր, ոչ թե «պարտադիր» մասը։

Նորմալացում ՝ trimming lines, գրանցումների միավորում, auto ձևաչափը (օրինակ '+ 1 (_ _ _) _ _ _ _ _ _ _ _), բայց սկզբնական տվյալների մեջ պահպանեք «մաքուր» տարբերակը։

7) Հասանելիություն (A11y)

Կապը '"label' enter 'input", սխալները' aria-describedby "։

Քննադատական '"role" = "alment", տեղեկատվական' "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» միջազգային ձևաչափով մուտքագրումը, երկրի ավտո նկար։

Հաղորդագրությունների լեզուն 'կարճ, մշակույթային չեզոք; դրեք տողի երկարության + 20-30 տոկոսը։

9) Անվտանգությունն ու գաղտնիությունը

Մի ցույց մի տվեք, որ հաշիվը գոյություն ունի/գոյություն չունի, ընդհանուր տեքստը ․ «Եթե email-ը գրանցված է, մենք նամակ կուղարկենք»։

Դիմեք զգայուն տվյալները (PAN, անձնագիր)։

Կրիտիկական քայլերի վրա (դրույքաչափը/դրույքաչափը) օգտագործեք impotenty և «անվտանգ կրկնություններ»։

Լոգները 'ID հարաբերակցության հետ առանց PII հաղորդագրություններում։

10) Առաջընթացի պահպանումը

Avtosev chernovica (տեղական/սերվերի վրա)։

Ուղարկման սխալի դեպքում ձևը մնում է լցված։ առաջարկվում է կրկնօրինակը ավելի ուշ։

Բազմաշերտ գործընթացների ժամանակ (KYC), պահպանեք ավարտված քայլերը։

11) Ասինխրոն վալիդացիա

Դեբաունս 250-400 մզ; ցույց ենք տալիս «ստուգել»... դաշտի մոտ, առանց ամբողջ էկրանը արգելափակելու։

Հաջողության ապշեցուցիչ ինդիկացիա/անհարմարություն առանց մակետի «դերգանիայի»։

Timaut-ի ցանցը "Չհաջողվեց ստուգել։ Շարունակել ռուսական հետ"։ (եթե թույլատրելի է) կամ «Կրկնել»։

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) Իրականացման սնիպետներ

Դաշտը inault-vaidator (ձևաչափը + սերվերային ստուգում)

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-ով և պատճառներով (ձևաչափեր/limits/սերվեր)։

Երկրորդ ուղարկումը (retry success rate)։

Լքված ձևերի և խորության մասնաբաժինը։

Արտահայտությունների լրացումը 'CTR «Ավելին», ենթադրությունների թաքնման հաճախությունը։

17) QA-chek-թերթ

A11y

• Ֆոկուսը անցնում է առաջին սխալ դաշտին, «aria-describedby »/« aria-medalid» -ը ցուցադրվում է։
• Հակադրություն AA; հաղորդագրությունները կախված չեն միայն գույներից։

Վարք

• Ներկառուցված վալիդացիա դեբաունսի հետ; սխալները հայտնվում են ոչ շուտ, քան բլուրը (բացառությամբ կրիտիկական դիմակների)։
• Բանաձևի վրա ձևավորվում է կամար, դաշտերը չեն մաքրվում։
• Ասինխրոնի ստուգումները չեն արգելափակում էջը. կա թայմաուտ և խոհարար։

Տեքստը

• Պատճառը + ինչպես շտկել; առանց վիզայի/մեղքի։
• Տեղայնացումը չի կոտրում մոդելը; օրինակները տեղին են։

Անվտանգություն

• Չկա PII արտահոսք հաղորդագրություններում. չենք բացահայտում հաշիվը։
• Idempotenty քննադատական գործողությունների համար։

18) Մոսկվա դիզայնի համակարգում

Բաղադրիչները ՝ «Fiance Error», «FormSummary», «HelperJ», «BusyButton»։

Ստանդարտ դաշտերի համար կանոնների քարտեզները (email, հեռախոսը, գաղտնաբառը, հասցեն, IBAN, ամսաթիվը)։

Դելդները դեբաունսի, ասինխրոնի ստուգման և օֆլինի վարքի մասին։

Տեքստերի օրինակները հաճախակի սխալների և «մինչև/հետո» օրինակների համար։

Ռուսական ռեզյումե

Ներկառուցված վալիդացիան նախապատմական օգնության, հստակ հրահանգների և տվյալների հանդեպ զգայուն վերաբերմունքի մասին է։ Ստուգեք տեղական և սերվերի վրա, ցույց տվեք սխալները կոնկրետ գործողությունների հետ, հարգեք հասանելիությունն ու գաղտնիությունը, պահպանեք առաջընթացը և օգտագործեք դեբաունս։ Այդ ձևերը դառնում են ընկերական, իսկ սխալները ՝ արագ և ուղղիչ։