التحقق المدمج وأخطاء UX

1) المبادئ

1. الرعاية التنبؤية، وليس العقاب. نوضح كيفية الدخول بشكل صحيح قبل الخطأ.
2. لا تفقد البيانات. أي خطأ لا يدمر المدخل ؛ دعم إلغاء/إعادة.
3. لحظة العرض.

قبل الإدخال: نص مساعد (قواعد وأمثلة).
أثناء: تلميحات ناعمة/قناع/استبدال تلقائي.
بعد (طمس/إرسال): خطأ واضح في التعليمات «كيفية الإصلاح».
4. اقتصاد الانتباه. رسالة واحدة هي سبب واحد وعمل واحد.
5. إمكانية الوصول. Text + icon/color, link to the field via ARIA, focus to the first roneous field.

2) طبقات التحقق

العميل متزامن: تنسيق، طول، إلزامي، قناع. سريع ورخيص.
العميل غير المتزامن: تفرد تسجيل الدخول، فحص BIN/IBAN، تلميحات API. مع الفضح.
غرفة الخادم: قواعد العمل، والحدود، وتسجيل المخاطر، والترخيص/الحقوق. حقيقة الملاذ الأخير.
القاعدة: حتى مع وجود فحص العميل المثالي، يؤكد الخادم النص النهائي وينشئه.

3) التوقيت والفضح

التحقق من صحة ردود الفعل الضبابية → الفورية ≤ 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-descedby».
وباختصار، وعلى وجه التحديد ؛ دون فقرات طويلة.
اللون + أيقونة، لكن المعنى - في النص.

5. 2 أدناه النموذج (موجز)

يسرد جميع الأخطاء مع المراسي الميدانية.
زر «اذهب إلى الخطأ »/انقر على عنصر يغير التركيز.

5. 3 في عملية إرسال

حظر الضغط المتكرر (الدولة «مشغولة»).
مع مهلة 3-5 ثوانٍ - «في انتظار التأكيد»... مع إعادة آمنة.

6) الأقنعة والنصائح التلقائية ومصححات التجميل

يجب ألا تتداخل الأقنعة مع الإدراج/التحرير. السماح بالدخول المجاني، والتطبيع تحت غطاء المحرك.
نصائح تلقائية: إظهار تنسيقات العينة، العنصر الإضافي كتلميح، وليس جزءًا «مطلوبًا».
التطبيع: تقليم المساحات، توحيد السجلات، تنسيق تلقائي (على سبيل المثال، '+ 1 (___) ___ - ____') - ولكن الحفاظ على النسخة «نظيفة» في بيانات المصدر.

7) التوافر (A11y)

الرابط: «تسمية» ↔ «إدخال»، أخطاء في «وصف أغنية».
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) الأشكال الدولية والتوطين

الأسماء/العناوين: السماح بأبجديات مختلفة، أطوال، فاصلة عليا، واصلات.
التواريخ/العملات/الأرقام: استخدام أشكال المدخلات المحلية وهياكل التخزين الداخلية الصارمة (ISO/عدد السنتات).
الهاتف: إدخال بالتنسيق الدولي '+ CC'، تلميح تلقائي حسب البلد.
لغة الرسالة: قصيرة ومحايدة ثقافيا ؛ وضع + 20-30٪ من طول الخط.

9) الأمن والخصوصية

لا تظهر أن الحساب موجود/غير موجود - النص العام: «إذا تم تسجيل البريد الإلكتروني، فسنرسل بريدًا إلكترونيًا».
إخفاء البيانات الحساسة (PAN، جواز السفر).
في الخطوات الحاسمة (العطاء/الأجر) استخدم الغباء و «الإعادة الآمنة».
السجلات - مع معرف الارتباط بدون PII في الرسائل.

10) توفير التقدم

مشروع موجز تلقائي (محلي/خادم).
في حالة الخطأ في التقديم - يبقى الاستمارة مملوءة ؛ يقترح تكرارها لاحقا.
للعمليات متعددة الخطوات (KYC) - وفر الخطوات المكتملة.

11) التحقق غير المتزامن

Debowns 250-400 mm ؛ نظهر «تحقق»... بالقرب من الحقل دون حجب الشاشة بأكملها.
مؤشر واضح على النجاح/الفشل دون «ارتعاش» التخطيط.
مهلة الشبكة → "غير قادر على التحقق. هل تريد الاستمرار في المخاطرة ؟ (عند الاقتضاء) أو 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) أنتيباترن

أظهر أخطاء «لكل شخصية» دون فضح.
يعيد ضبط النموذج عند الخطأ.
رسالة «دخول غير صالح» بدون حقل/قاعدة.
المعلومات الحرجة فقط عن طريق اللون/الأيقونة.
قفل الصفحة بأكملها للتحقق من صحة حقل واحد.
عدم وجود وضع غير متصل بالإنترنت والتكرار أثناء فشل الشبكة.

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-descripby "/" aria-invalid'.
• التباين ≥ AA ؛ الرسائل مستقلة عن اللون فقط.

سلوك

• المصادقة المدمجة مع فضح الكذب ؛ لا تظهر الأخطاء في وقت أبكر من الضبابية (باستثناء الأقنعة الحرجة).
• يتم إعداد موجز على الطلب، ولم يتم تطهير الحقول.
• لا تقفل الفحوصات غير المتزامنة الصفحة ؛ هناك مهلة وإعادة.

نص

• السبب + كيفية الإصلاح ؛ لا توجد رموز/ذنب.
• التوطين لا يكسر التصميم ؛ أمثلة ذات صلة بالموضوع.

السلامة

• لا تسرب PII في الرسائل ؛ لا تكشف عن وجود الحساب.
• الخصوصية للعمليات الحرجة.

18) التوثيق في نظام التصميم

المكونات: "FieldError" و "FormSummary" و "HelperText' و" BusyButton ".
خرائط القواعد للحقول النموذجية (البريد الإلكتروني، الهاتف، كلمة المرور، العنوان، IBAN، التاريخ).
أدلة للفضح والفحص غير المتزامن والسلوك غير المتصل بالإنترنت.
نماذج نصية للأخطاء المتكررة والأمثلة السابقة/اللاحقة.

موجز

يتعلق التحقق المدمج بالرعاية التنبؤية والتعليمات الواضحة والموقف الدقيق تجاه البيانات. تحقق محليًا وعلى الخادم، وأظهر الأخطاء في الوقت المناسب مع إجراءات محددة، واحترم التوافر والخصوصية، وحفظ التقدم واستخدم زيف الزيف. لذلك تصبح الأشكال ودية، وتصبح الأخطاء سريعة وقابلة للإصلاح.