اعتبار سنجی داخلی و خطاهای UX

1) اصول

1. مراقبت پیشگویانه، نه مجازات ما نشان می دهد که چگونه به درستی وارد کنید، قبل از خطا.
2. اطلاعات را از دست ندهید. هر گونه خطا ورودی را نابود نمی کند ؛ پشتیبانی لغو/تلاش مجدد.

3. لحظه نمایش

قبل از ورود: متن کمکی (قوانین و نمونه ها).
در طول: نکات نرم/ماسک/تعویض خودکار.
After (blur/submit): یک خطای واضح با دستور «چگونه رفع شود».
4. اقتصاد توجه. یک پیام یک دلیل و یک عمل است.
5. قابلیت دسترسی متن + آیکون/رنگ، پیوند به فیلد از طریق ARIA، تمرکز بر اولین فیلد اشتباه است.

2) لایه های اعتبار سنجی

مشتری همزمان: فرمت، طول، اجباری، ماسک. سریع و ارزان

ناهمزمان مشتری: ورود به سیستم منحصر به فرد، بررسی BIN/IBAN، نکات API. با بی احترامی

اتاق سرور: قوانین کسب و کار، محدودیت ها، نمره ریسک، مجوز/حقوق. حقیقت آخرین راه حل

قانون: حتی با یک بررسی مشتری ایده آل، سرور متن نهایی را تأیید و تولید می کند.

3) زمان بندی و debunks

تأیید موفقیت - نماد laconic («OK») یا سبز ؛ بدون «سلام»

اعتبار سنجی برای تاری → بازخورد فوری ≤ 100 میلی ثانیه.
چک آسنکرون - بدهی 250-400 میلی ثانیه پس از توقف ورودی.
در «ارسال» ما لیستی از خطاها را نشان می دهیم و تمرکز را به اول منتقل می کنیم.

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

4) خطاهای کپی رایت

الگو: دلیل → چگونه به رفع → جایگزین (در صورت وجود).

خوب: "رمز عبور کوتاه تر از 8 کاراکتر است. اضافه کردن شخصیت های بیشتر و یا استفاده از یک عبارت.

خوب: "IBAN به نظر نمی رسد. بررسی طول و شخصیت: A-Z, 0-9"

بد: «ورودی نادرست».
کاربران را سرزنش نکنید اجتناب از اصطلاحات و کدها.
در مناطق حساس (پرداخت/ASC)، ما از جزئیات که ایمنی را نشان می دهد اجتناب می کنیم.

5) الگوهای نمایش پیام

5. 1 در زمینه (درون خطی)

به طور خلاصه، به طور خاص ؛ بدون پاراگراف های طولانی

' aria-invalid =» true»', текст в 'aria-describedby'.
رنگ + آیکون، اما معنی - در متن.

5. 2 در زیر فرم (خلاصه)

لیست تمام اشتباهات با لنگرهای زمینه.
دکمه «Go to error »/کلیک بر روی یک آیتم تمرکز را تغییر می دهد.

5. 3 در فرآیند ارسال

فشار دادن مکرر) حالت «اشغال» (را مسدود کنید.
با اتمام وقت 3-5 s - «در انتظار تأیید»... با یک پاسخ امن.

6) ماسک ها، راهنمایی های خودکار و اصلاح کننده ها

ماسک ها نباید با درج/ویرایش تداخل داشته باشند. اجازه ورود آزاد، عادی تحت هود.
راهنمایی خودکار: فرمت های نمونه را نشان می دهد، نگهدارنده به عنوان یک اشاره، نه یک بخش «مورد نیاز».
نرمالیزاسیون: پیرایش فضاها، متحد کردن ثباتها، فرمت خودکار (به عنوان مثال، '+ 1 (___) ___ - ____') - اما نسخه «پاک» را در داده های منبع نگه دارید.

7) در دسترس بودن (A11y)

لینک: 'label' ↔ 'input', errors in 'aria-descripedby'.
Critical - «role =» alert «», informational - «role =» status «».
ما تمرکز را به زمینه اشتباه باز می گردانیم، «: تمرکز قابل مشاهده» ما می بینیم.
کنتراست متن/آیکون ≥ 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) فرمت های بین المللی و محلی سازی

نام/آدرس: اجازه می دهد حروف مختلف، طول، apostrophes، خط فاصله.
تاریخ/ارز/شماره: از فرمت های ورودی محلی و ساختار ذخیره سازی داخلی (ISO/تعداد سنت) استفاده کنید.
تلفن: ورودی در فرمت بین المللی «+ CC»، اشاره خودکار بر اساس کشور.
زبان پیام: کوتاه، فرهنگی بی طرف ؛ ذخیره کردن + 20-30٪ از طول خط.

9) امنیت و حریم خصوصی

نشان ندهید که حساب وجود دارد/وجود ندارد - متن کلی: «اگر ایمیل ثبت شده است، ما یک ایمیل ارسال خواهیم کرد».
ماسک اطلاعات حساس (PAN، گذرنامه).
در مراحل مهم (پیشنهاد/پرداخت) از idempointence و «تکرار ایمن» استفاده کنید.
Logs - با شناسه همبستگی بدون PII در پیام ها.

10) صرفه جویی در پیشرفت

ذخیرۀ خودکار پیشنویس) محلی/کارساز (.
در صورت خطای ارسال - فرم همچنان پر می شود ؛ پیشنهاد می شود بعدا تکرار شود.
برای فرآیندهای چند مرحله ای (KYC) - مراحل تکمیل شده را ذخیره کنید.

11) اعتبار سنجی ناهمزمان

بدهی 250-400 میلی ثانیه ؛ ما نشان می دهد «بررسی»... در نزدیکی زمینه بدون مسدود کردن کل صفحه نمایش.
نشانه واضح موفقیت/شکست بدون «تکان دادن» طرح.
اتمام وقت شبکه → "قادر به تأیید نیست. آیا می خواهید ریسک را ادامه دهید ؟ (در صورت لزوم) یا Redo.

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/wallets: تایید پذیرش توسط کشور/محدودیت ها، متون روشن در مورد کمیسیون/مهلت.
KYC: الزامات گام به گام برای عکس ها/اسناد، پیش نمایش، اندازه فایل/نوع، زمان تأیید، حریم خصوصی.
بازی مسئولانه: پیام ها خنثی هستند، با اقدامات «تنظیم محدودیت «/» کمک «.

13) ضد گلوله

نمایش خطاهای «در هر کاراکتر» بدون debunking.
فرم را به اشتباه برگردانید.
پیام «ورود نامعتبر» بدون فیلد/قانون.
اطلاعات مهم تنها با رنگ/آیکون.
کل صفحه را قفل کنید تا یک فیلد تأیید شود.
عدم وجود حالت آفلاین و تکرار در هنگام خرابی شبکه.

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) قطعه پیاده سازی

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) معیارها و کنترل

زمان برای تعمیر

میزان خطا بر اساس فیلد و دلیل (قالب/محدودیت/سرور).
نرخ موفقیت را دوباره امتحان کنید.
نسبت اشکال رها شده و عمق زمین.
پر از پیشنهادات: CTR «جزئیات»، فرکانس پنهان کردن پیشنهادات.

17) چک لیست QA

A11y

• تمرکز به اولین فیلد نامعتبر حرکت می کند ؛ 'aria-describedby '/' aria-invalid' مجموعه.
• کنتراست ≥ AA ؛ پیام ها تنها مستقل از رنگ هستند.

رفتار ها

• ساخته شده در اعتبار با debunking ؛ خطاها زودتر از تاری ظاهر نمی شوند (به جز ماسک های بحرانی).
• خلاصه ای در ارسال ایجاد می شود، زمینه ها پاک نمی شوند.
• چک های آسنکرون صفحه را قفل نمی کند ؛ یک وقفه و یک بازپخش وجود دارد.

متن ها

• دلیل + چگونه به رفع ؛ بدون کد/گناه.
• محلی سازی طرح را خراب نمی کند ؛ مثال ها مرتبط هستند.

امنیت و ایمنی

• بدون PII نشت در پیام ها ؛ وجود حساب را فاش نکنید.
• عدم توانایی برای عملیات بحرانی.

18) مستند سازی در سیستم طراحی

کامپوننتها: 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
نقشه های قانون برای زمینه های معمولی (ایمیل، تلفن، رمز عبور، آدرس، IBAN، تاریخ).
راهنمایی برای debunking، چک کردن ناهمزمان و رفتار آفلاین.
قالب متن برای خطاهای مکرر و قبل/بعد از نمونه.

خلاصه ای کوتاه

اعتبار سنجی داخلی در مورد مراقبت پیش بینی شده، دستورالعمل های روشن و نگرش دقیق به داده ها است. بررسی به صورت محلی و بر روی سرور، نشان دادن خطاها در زمان مناسب با اقدامات خاص، در دسترس بودن احترام و حفظ حریم خصوصی، صرفه جویی در پیشرفت و استفاده از debuns. بنابراین فرم ها دوستانه می شوند و اشتباهات سریع و قابل حل می شوند.