Yerleşik doğrulama ve UX hataları

1) İlkeler

1. Kestirimci bakım, ceza değil. Hatadan önce nasıl doğru girileceğini gösteriyoruz.
2. Verileri kaybetmeyin. Herhangi bir hata girileni yok etmez; İptal Et/Yeniden Dene'yi destekleyin.
3. Gösterim anı.

Girmeden önce: yardımcı metin (kurallar ve örnekler).
Sırasında: yumuşak ipuçları/maske/otomatik değiştirme.
After (blur/submit): "nasıl düzeltilir" komutu ile açık bir hata.
4. Ekonomiye dikkat. Bir mesaj bir sebep ve bir eylemdir.
5. Erişilebilirlik. Metin + simge/renk, ARIA aracılığıyla alana bağlantı, ilk hatalı alana odaklanın.

2) Doğrulama katmanları

İstemci eşzamanlı: biçim, uzunluk, zorunlu, maske. Hızlı ve ucuz.
İstemci eşzamansız: oturum açma benzersizliği, BIN/IBAN denetimi, API ipuçları. Debunking ile.
Sunucu odası: iş kuralları, limitler, risk puanlaması, yetkilendirme/haklar. Son çare gerçeği.
Kural: İdeal bir müşteri kontrolünde bile, sunucu nihai metni onaylar ve üretir.

3) Zamanlamalar ve debunks

Bulanıklaştırma için doğrulama - 100 ms ≤ anında geri bildirim.
Asenkron kontrol - giriş durduktan sonra borç 250-400 ms.
Başarının onayı - laconic ("Ok") veya yeşil simge; "Selam" olmadan.
'Gönder'de hataların listesini gösterir ve odağı ilkine aktarırız.

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

4) Metin yazarlığı hataları

Şablon: sebep - nasıl düzeltilir - alternatif (varsa).

İyi: "Şifre 8 karakterden daha kısa. Daha fazla karakter ekleyin veya bir cümle kullanın.

İyi: "IBAN doğru görünmüyor. Uzunluğu ve karakterleri kontrol edin: A-Z, 0-9"

Kötü: "Yanlış giriş".
Kullanıcıyı suçlamayın; jargon ve kodlardan kaçının.
Hassas alanlarda (ödemeler/ASC), güvenliği ortaya çıkaran ayrıntılardan kaçınırız.

5) Mesaj görüntüleme desenleri

5. 1 Sahada (satır içi)

'aria-invalid =' true '', текст в 'aria-describedby'.
Kısaca, özellikle; Uzun paragraflar olmadan.
Renk + simge, ancak anlam - metinde.

5. 2 Formun altında (özet)

Alan bağlantılarıyla ilgili tüm hataları listeler.
"Hataya git" düğmesi/bir öğeye tıklamak odağı kaydırır.

5. 3 Gönderme sürecinde

Blok tekrarlanan presleme (durum 'meşgul').
3-5 s bir zaman aşımı ile - "Onay bekliyor"... Güvenli bir tekrarla.

6) Maskeler, otomatik ipuçları ve prova okuyucular

Maskeler ekleme/düzenlemeye müdahale etmemelidir. Ücretsiz girişe izin verin, kaputun altında normalleştirin.
Otomatik ipuçları: örnek formatları göster, ipucu olarak yer tutucu, "gerekli'bir bölüm değil.
Normalleştirme: boşlukları kırpma, kayıtları birleştirme, otomatik biçimlendirme (örneğin, '+ 1 (___) ___ - ____') - ancak "temiz" sürümü kaynak verilerde tutun.

7) Kullanılabilirlik (A11y)

Link: 'Label' ↔ 'input', errors in 'aria-description edby'.
Critical - 'role =' alert ', informational -' role = 'status'.
Odağı hatalı alana döndürüyoruz, gördüğümüz ': odak-görünür'.
Metin/simge kontrastı ≥ AA; Anlam sadece renge bağlı değildir.

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) Uluslararası formatlar ve yerelleştirme

Adlar/adresler: farklı alfabelere, uzunluklara, kesme işaretlerine, tirelere izin verir.
Tarihler/para birimleri/sayılar: Yerel giriş formatlarını ve sıkı dahili depolama yapılarını kullanın (ISO/sent sayısı).
Telefon: uluslararası formatta giriş '+ CC', ülkeye göre otomatik ipucu.
Mesaj dili: kısa, kültürel olarak tarafsız; Çizgi uzunluğunun + %20-30'unu yatır.

9) Güvenlik ve gizlilik

Hesabın var olduğunu/olmadığını göstermeyin - genel metin: "E-posta kayıtlıysa, bir e-posta göndereceğiz".
Hassas verileri maskeleme (PAN, pasaport).
Kritik adımlarda (teklif/ödeme) idempotence ve "güvenli tekrarlar" kullanın.
Günlükler - mesajlarda PII olmadan korelasyon kimliği ile.

10) İlerlemeyi kaydetme

Taslak otomatik kaydetme (yerel/sunucu).
Gönderim hatası durumunda - form doldurulmaya devam eder; Önerilen daha sonra tekrarlanır.
Çok Adımlı İşlemler (KYC) için - Tamamlanan adımları kaydedin.

11) Eşzamansız doğrulama

Debowns 250-400 ms; Tüm ekranı engellemeden alanın yakınında "kontrol" gösteriyoruz.
Düzenin "seğirmesi" olmadan başarı/başarısızlığın açık bir göstergesi.
Ağ zaman aşımı - "Doğrulanamadı. Risk almaya devam etmek istiyor musunuz? (varsa) veya Yinele.

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) Ödeme formları ve KYC (özellikler)

Haritalar: PAN formatı, terim, CVC - girildiği gibi doğrulama; hatalar - banka tarafından reddedilme nedenini açıklamadan.
A2A/wallets: ülkeye/sınırlara göre kabul edilebilirliğin doğrulanması, komisyonlar/son tarihler hakkında açık metinler.
KYC: fotoğraflar/belgeler, önizleme, dosya boyutu/türü, doğrulama süresi, gizlilik için adım adım gereksinimler.
Sorumlu oyun: "Set limit "/" Yardım "eylemleri ile mesajlar nötr.

13) Antipatterns

Hata ayıklamadan "karakter başına" hataları göster.
Hata üzerine formu sıfırlar.
Alan/kural olmadan "Geçersiz giriş" mesajı.
Yalnızca renk/simge ile kritik bilgiler.
Tek bir alanı doğrulamak için tüm sayfayı kilitleyin.
Çevrimdışı modun yokluğu ve ağ arızaları sırasında tekrarlamalar.

14) Tasarım sistemi belirteçleri (örnek)

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) Uygulama parçacıkları

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) Metrikler ve Kontrol

Tamir zamanı.
Alana ve nedene göre hata oranı (format/limit/sunucu).
Başarı oranını tekrar deneyin.
Terk edilmiş şekillerin oranı ve perde derinliği.
İstemlerle dolu: TO "Ayrıntılar", gizleme istemlerinin sıklığı.

17) KG kontrol listesi

A11y

• Odak ilk geçersiz alana geçer; 'aria-describedby'/' aria-invalid' kümesi.
• AA ≥ kontrast; Mesajlar yalnızca renkten bağımsızdır.

Davranış

• Debunking ile yerleşik doğrulama; Hatalar bulanıklıktan daha önce görünmez (kritik maskeler hariç).
• Gönderide bir özet oluşturulur, alanlar temizlenmez.
• Asenkron kontroller sayfayı kilitlemez; Bir zaman aşımı ve bir tekrar var.

Metin

• Sebep + nasıl düzeltilir; Kod/suçluluk yok.
• Yerelleştirme düzeni bozmaz; örnekler önemlidir.

Güvenlik

• Mesajlarda PII sızıntısı yok; hesabın varlığını açıklamayın.
• Kritik operasyonlar için idempotency.

18) Tasarım sistemindeki belgeler

Bileşenler: 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
Tipik alanlar için kural haritaları (e-posta, telefon, şifre, adres, IBAN, tarih).
Hata ayıklama, eşzamansız denetleme ve çevrimdışı davranış için kılavuzlar.
Sık yapılan hatalar ve öncesindeki/sonrasındaki örnekler için metin şablonları.

Kısa özet

Yerleşik doğrulama, öngörücü bakım, açık talimatlar ve verilere karşı dikkatli tutumla ilgilidir. Yerel olarak ve sunucuda kontrol edin, belirli eylemlerle hataları doğru zamanda gösterin, kullanılabilirliğe ve gizliliğe saygı gösterin, ilerlemeyi kaydedin ve hata ayıklamaları kullanın. Böylece formlar dostça olur ve hatalar hızlı ve düzeltilebilir hale gelir.