अंतर्निहित सत्यापन और UX त्रुटियाँ

1) सिद्धांत

1. पूर्वानुमानित देखभाल, सजा नहीं। हम दिखाते हैं कि त्रुटि से पहले कैसे सही तरीके से प्रवेश करें।

2. डाटा न खोएँ. कोई भी त्रुटि दर्ज को नष्ट नहीं करती है; रद्द करें/फिर कोशिश करें।

3. प्रदर्शन का क्षण।

प्रवेश करने से पहले: सहायक पाठ (नियम और उदाहरण)।

के दौरान: नरम संकेत/मास्क/ऑटो-प्रतिस्थापन।

के बाद (धुंधला/जमा करें): निर्देश के साथ एक स्पष्ट त्रुटि "कैसे ठीक करें।"

4. ध्यान अर्थव्यवस् एक संदेश एक कारण और एक क्रिया है।

5. पहुँच। पाठ + आइकन/रंग, ARIA के माध्यम से क्षेत्र से लिंक, पहले गलत क्षेत्र पर ध्यान केंद्रित करें।

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 सही नहीं दिखता है। लंबाई और अक्षर की जाँच करें: ए-जेड, 0-9"।

बुरा: "गलत इनपुट।"

उपयोगकर्ता को दोष न दें; शब्दजाल और कोड से बचें।

संवेदनशील क्षेत्रों (भुगतान/एएससी) में, हम सुरक्षा को प्रकट करने वाले विवरणों से बचते

5) संदेश प्रदर्शन पैटर्न

5. 1 क्षेत्र में (इनलाइन)

' एरिया-अमान्य =" ट्रू", текст в' आरिया-डिस्क्रिबेडबी '।

संक्षेप में, विशेष रूप से; लंबे पैराग्राफ के बिना।

रंग + प्रतीक, लेकिन अर्थ - पाठ में।

5. 2 फॉर्म के नीचे (सारांश)

फ़ील्ड एंकर के साथ सभी त्रुटियों को सूचीबद्ध करता है।

"गो टू त्रुटि" बटन/किसी आइटम शिफ्ट पर क्लिक करना फोकस करता है।

5. 3 भेजने की प्रक्रिया में

ब्लॉक बार-बार दबाना (राज्य 'व्यस्त')।

3-5 एस के समय के साथ - "पुष्टि की प्रतीक्षा"... एक सुरक्षित रीप्ले के साथ।

6) मास्क, ऑटो-टिप्स और प्रूफ रीडर्स

मास्क सम्मिलन/संपादन में हस्तक्षेप नहीं करना चाहिए। मुफ्त प्रवेश की अनुमति दें, हुड के तहत सामान्य करें।

ऑटो-टिप्स: नमूना प्रारूप, एक संकेत के रूप में प्लेसहोल्डर दिखाएं, न कि "आवश्यक" भाग।

सामान्यीकरण: ट्रिमिंग रिक्त स्थान, एकीकृत रजिस्टर, ऑटो-प्रारूप (उदाहरण के लिए, '+ 1 ( ) -') - लेकिन स्रोत डेटा में "स्वच्छ" संस्करण रखें।

7) उपलब्धता (A11y)

लिंक: 'लेबल' ↔ 'इनपुट', 'आरिया-वर्णन' में त्रुटियाँ.

महत्वपूर्ण - 'भूमिका = "अलर्ट", सूचनात्मक -' भूमिका = "स्थिति"।

हम गलत क्षेत्र पर ध्यान केंद्रित करते हैं, ': फोकस-दृश्यमान' हम देखते हैं।

पाठ/प्रतीक कंट्रास्ट ≥ एए; अर्थ केवल रंग पर निर्भर नहीं करता है।

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) अंतर्राष्ट्रीय प्रारूप और स्थानीयकरण

नाम/पते: विभिन्न वर्णमालाओं, लंबाई, एपोस्ट्रोफ़्स, हाइफ़न की अनुमति दें।

दिनांक/मुद्राएं/संख्याएँ: स्थानीय इनपुट प्रारूप और सख्त आंतरिक भंडारण संरचनाओं (आईएसओ/सेंट की संख्या) का उपयोग करें।

फोन: अंतर्राष्ट्रीय प्रारूप '+ सीसी' में इनपुट, देश द्वारा ऑटो-इशारा।

संदेश भाषा: लघु, सांस्कृतिक रूप से तटस्थ; लाइन की लंबाई का + 20-30% लेट।

9) सुरक्षा और गोपनीयता

यह न दिखाएं कि खाता मौजूद है/मौजूद नहीं है - सामान्य पाठ: "यदि ईमेल पंजीकृत है, तो हम एक ईमेल भेजेंगे।"

मास्क संवेदनशील डेटा (पैन, पासपोर्ट)।

महत्वपूर्ण चरणों (बोली/वेतन) पर पहचान और "सुरक्षित रिप्ले" का उपयोग करते हैं।

लॉग - संदेशों में PII के बिना सहसंबंध आईडी के साथ।

10) प्रगति को बचाना

ड्राफ्ट ऑटोसेव (स्थानीय/सर्वर)।

प्रस्तुत करने की त्रुटि के मामले में - फॉर्म में भरा रहता है; बाद में दोहराने का सुझाव दिया।

मल्टी-स्टेप प्रक्रियाओं (केवाईसी) के लिए - पूर्ण चरणों को सहेजें।

11) अतुल्यकालिक सत्यापन

डेब्यू 250-400 एमएस; हम पूरी स्क्रीन को अवरुद्ध किए बिना मैदान के पास "चेक"... दिखाते हैं

लेआउट की "ट्विचिंग" के बिना सफलता/विफलता का स्पष्ट संकेत।

नेटवर्क टाइमआउट - "सत्यापित करने में असमर्थ। क्या आप जोखिम के साथ जारी रखना चाहते हैं? (यदि लागू हो) या रेडो।

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) भुगतान प्रपत्र और केवाईसी (विशिष्ट)

मानचित्र: पैन प्रारूप, शब्द, सीवीसी - प्रविष्टि के रूप में सत्यापन; त्रुटियां - बैंक द्वारा अस्वीकृति के कारण का खुलासा किए बिना।

A2A/wallets: देश/सीमा द्वारा प्रवेश का सत्यापन, कमीशन/समय सीमा के बारे में स्पष्ट ग्रंथ।

केवाईसी: फोटो/दस्तावेजों, पूर्वावलोकन, फ़ाइल आकार/प्रकार, सत्यापन समय, गोपनीयता के लिए चरण-दर-चरण आवश्यकताएं।

जिम्मेदार नाटक: संदेश तटस्थ हैं, "सेट लिमिट "/" हेल्प "क्रियाओं के साथ।

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) मेट्रिक्स एंड कंट्रोल

टाइम-टू-फिक्स।

क्षेत्र और कारण के अनुसार त्रुटि दर (प्रारूप/सीमा/सर्वर)।

सफलता दर को फिर से आज़माएं।

परित्यक्त आकृतियों और पिच की गहराई का अनुपात।

संकेतों से भरा: सीटीआर "विवरण", छिपाने के संकेतों की आवृत्ति।

17) क्यूए चेकलिस्ट

A11y

• फोकस पहले अवैध क्षेत्र में चला जाता है; 'एरिया-डिस्क्रिबेडबी '/' आरिया-अमान्य' सेट।
• कंट्रास्ट ≥ एए; संदेश केवल रंग से स्वतंत्र हैं।

व्यवहार

• डिबंकिंग के साथ निर्मित सत्यापन; त्रुटियां धब्बा (महत्वपूर्ण मुखौटे को छोड़ कर) से पहले नहीं दिखाई देती हैं।
• सबमिट पर एक सारांश उत्पन्न होता है, क्षेत्र साफ नहीं होते हैं।
• अतुल्यकालिक जाँच पृष्ठ को लॉक नहीं करती है; एक टाइमआउट और एक रीप्ले है।

पाठ

• कारण + कैसे ठीक करें; कोई कोड/अपराध नहीं।
• स्थानीयकरण लेआउट को नहीं तोड़ ता है; उदाहरण प्रासंगिक हैं।

सुरक्षा

• संदेशों में कोई पीआईआई लीक नहीं; खाते के अस्तित्व का खुलासा न करें।
• महत्वपूर्ण संचालन के लिए पहचान।

18) डिजाइन प्रणाली में प्रलेखन

घटक: 'फील्डत्रुटि', 'फॉर्मसारांश', 'हेल्परटेक्स्ट', ' बटन'.

विशिष्ट क्षेत्रों (ईमेल, फोन, पासवर्ड, पता, IBAN, तिथि) के लिए नियम मानचित्र।

डिबंकिंग, अतुल्यकालिक जाँच और ऑफ़ लाइन व्यवहार के लिए गाइड।

अक्सर त्रुटियों के लिए और उदाहरणों से पहले/बाद में टेम्पलेट।

संक्षिप्त सारांश

अंतर्निहित सत्यापन पूर्वानुमानित देखभाल, स्पष्ट निर्देशों और डेटा के लिए सावधानीपूर्वक रवैया के बारे में है स्थानीय रूप से और सर्वर पर जांचें, विशिष्ट क्रियाओं, सम्मान उपलब्धता और गोपनीयता के साथ सही समय पर त्रुटियां दिखाएं, प्रगति को बचाएं और डिबन का उपयोग करें। इसलिए रूप अनुकूल हो जाते हैं, और गलतियाँ तेज और फिक्सेबल हो जाती हैं।