Ενσωματωμένα σφάλματα επικύρωσης και UX

1) Αρχές

1. Προγνωστική φροντίδα, όχι τιμωρία. Δείχνουμε πώς να εισάγετε σωστά, πριν από το σφάλμα.
2. Μη χάνετε δεδομένα. Κάθε σφάλμα δεν καταστρέφει την καταχώριση. Υποστήριξη ακύρωσης/Retry.
3. Στιγμή απεικόνισης.

Πριν από την εισαγωγή: κείμενο βοηθού (κανόνες και παραδείγματα).
Κατά τη διάρκεια: μαλακές υποδείξεις/μάσκα/αυτόματη υποκατάσταση.
Μετά (θολή/υποβολή): ένα σαφές σφάλμα με την οδηγία «πώς να διορθώσετε».
4. Οικονομία της προσοχής. Ένα μήνυμα είναι ένας λόγος και μία ενέργεια.
5. Δυνατότητα πρόσβασης. Κείμενο + εικονίδιο/χρώμα, σύνδεσμος με το πεδίο μέσω ARIA, εστίαση στο πρώτο εσφαλμένο πεδίο.

2) Επίπεδα επικύρωσης

Συγχρονισμένος πελάτης: μορφότυπος, μήκος, υποχρεωτική, μάσκα. Γρήγορα και φτηνά.
Ασύγχρονος πελάτης: μοναδικότητα σύνδεσης, έλεγχος BIN/IBAN, υποδείξεις API. Με απομυθοποίηση.
Αίθουσα εξυπηρετητών: επιχειρηματικοί κανόνες, όρια, βαθμολόγηση κινδύνου, εξουσιοδότηση/δικαιώματα. Αλήθεια της έσχατης ανάγκης.
Κανόνας: ακόμα και με έναν ιδανικό έλεγχο πελάτη, ο εξυπηρετητής επιβεβαιώνει και παράγει το τελικό κείμενο.

3) Χρονοδιαγράμματα και απομυθοποιήσεις

Επικύρωση για θολό → στιγμιαία ανάδραση ≤ 100 ms.
Ασύγχρονος έλεγχος - χρέωση 250-400 ms μετά τη διακοπή εισόδου.
Επιβεβαίωση επιτυχίας - λακωνικό («Ok») ή πράσινο εικονίδιο. χωρίς «χαιρετισμούς».
Όσον αφορά την «υποβολή», παρουσιάζουμε τον κατάλογο των σφαλμάτων και τη μεταφορά της εστίασης στην πρώτη.

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

4) Σφάλματα copywriting

Υπόδειγμα: λόγος → τον τρόπο καθορισμού → εναλλακτικής λύσης (εάν υπάρχει).

Καλό: "Ο κωδικός πρόσβασης είναι μικρότερος από 8 χαρακτήρες. Προσθήκη περισσότερων χαρακτήρων ή χρήση μιας φράσης.

Καλό: "Το IBAN δεν φαίνεται σωστό. Μήκος και χαρακτήρες: A-Z, 0-9"

Κακό: «Εσφαλμένη εισαγωγή».
Μην κατηγορείς τον χρήστη. να αποφεύγεται η ορολογία και οι κωδικοί.
Σε ευαίσθητους τομείς (πληρωμές/ASC), αποφεύγουμε λεπτομέρειες που αποκαλύπτουν ασφάλεια.

5) Μοτίβα απεικόνισης μηνυμάτων

5. 1 Στο πεδίο (inline)

'aria-avalid = "true' ',' aria-description '.
Εν συντομία, συγκεκριμένα, χωρίς μακρές παραγράφους.
Χρώμα + εικονίδιο, αλλά νόημα - στο κείμενο.

5. 2 Παρακάτω έντυπο (περίληψη)

Απαριθμεί όλα τα σφάλματα με άγκυρες πεδίου.
Το κουμπί «Πηγαίνετε στο λάθος »/κάντε κλικ σε ένα αντικείμενο αλλάζει εστίαση.

5. 3 Κατά τη διαδικασία αποστολής

Κλείδωμα επαναλαμβανόμενης πίεσης (state 'busy').
Με χρόνο 3-5 s - «Αναμονή για επιβεβαίωση»... με ασφαλή αναπαραγωγή.

6) Μάσκες, αυτόματες συμβουλές και διορθωτές

Οι μάσκες δεν πρέπει να παρεμβαίνουν στην εισαγωγή/επεξεργασία. Επιτρέψτε την ελεύθερη είσοδο, κανονικοποιήστε κάτω από την κουκούλα.
Αυτόματες άκρες: εμφάνιση μορφοτύπων δειγμάτων, υποδηλωτής θέσης ως υπόδειξη, όχι ως «απαιτούμενο» μέρος.
Κανονικοποίηση: χώροι κοπής, ενοποιητικά μητρώα, αυτόματη μορφή (π.χ. '+ 1 (___) ___ - ____) - αλλά κρατήστε την «καθαρή» έκδοση στα δεδομένα πηγής.

7) Διαθεσιμότητα (A11y)

Σύνδεσμος: 'label' 'inpu , σφάλματα στο' aria-descripedby '.
Καίρια - 'ρόλος =' συναγερμός '', πληροφοριακός - 'ρόλος = «κατάσταση»'.
Επιστρέφουμε στο εσφαλμένο πεδίο, «: ορατή εστίαση» που βλέπουμε.
Αντίθεση κειμένου/εικονιδίου ≥ 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 είναι καταχωρημένο, θα στείλουμε ένα email».
Μάσκα ευαίσθητων δεδομένων (PAN, διαβατήριο).
Σε κρίσιμα βήματα (προσφορά/πληρωμή) χρησιμοποιείται η ταυτότητα και οι «ασφαλείς επαναλήψεις».
Αρχεία καταγραφής - με αναγνωριστικό συσχέτισης χωρίς PII σε μηνύματα.

10) Εξοικονόμηση προόδου

Σχέδιο autosave (τοπικό/διακομιστή).
Σε περίπτωση σφάλματος υποβολής - το έντυπο παραμένει συμπληρωμένο· προτείνεται να επαναληφθεί αργότερα.
Για διαδικασίες πολλαπλών σταδίων (KYC) - Αποθήκευση ολοκληρωμένων σταδίων.

11) Ασύγχρονη επικύρωση

Debowns 250-400 ms· δείχνουμε «check»... κοντά στο πεδίο χωρίς να μπλοκάρουμε ολόκληρη την οθόνη.
Σαφής ένδειξη επιτυχίας/αποτυχίας χωρίς «σύσπαση» της διάταξης.
Χρονοδιάγραμμα δικτύου → "Αδυναμία επαλήθευσης. Θέλετε να συνεχίσετε με τον κίνδυνο (κατά περίπτωση) ή 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 - επικύρωση όπως έχει εισαχθεί. σφάλματα - χωρίς να γνωστοποιείται ο λόγος της απόρριψης από την τράπεζα.
: επαλήθευση του παραδεκτού ανά χώρα/όρια, σαφή κείμενα σχετικά με τις προμήθειες/προθεσμίες.
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) Μετρήσεις και έλεγχος

Χρόνος-to-Fix.
Ποσοστό σφάλματος ανά πεδίο και κατά λόγο (μορφή/όρια/εξυπηρετητής).
Επαναπροσδιορισμός ποσοστού επιτυχίας.
Αναλογία εγκαταλελειμμένων σχημάτων και βάθους πίσσας.
Γεμάτο κίνητρα: CTR «Λεπτομέρειες», συχνότητα κρυψώνων.

17) Κατάλογος ελέγχου QA

A11y

• Εστίαση κινείται στο πρώτο άκυρο πεδίο? 'aria-designedby '/' aria-avalid' set.
• Αντίθεση ≥ AA; τα μηνύματα είναι ανεξάρτητα μόνο από το χρώμα.

Συμπεριφορά

• Ενσωματωμένη επικύρωση με απομυθοποίηση. δεν εμφανίζονται σφάλματα νωρίτερα από θολό (εκτός από κρίσιμες μάσκες).
• Συντάσσεται περίληψη σχετικά με την υποβολή, τα πεδία δεν εκκαθαρίζονται.
• Οι ασύγχρονοι έλεγχοι δεν κλειδώνουν τη σελίδα. υπάρχει ένα timeout και μια επανάληψη.

Κείμενο

• Λόγος + τρόπος καθορισμού. δεν υπάρχουν κωδικοί/ενοχές.
• Η τοπική προσαρμογή δεν σπάει τη διάταξη. σχετικά παραδείγματα.

Ασφάλεια

• Δεν υπάρχουν διαρροές PII σε μηνύματα. δεν αποκαλύπτουν την ύπαρξη του λογαριασμού.
• Ευελιξία για κρίσιμες λειτουργίες.

18) Τεκμηρίωση στο σύστημα σχεδιασμού

Συστατικά: 'FieldError', 'FormSummary', 'HelperText', 'BusinesButton'.
Χάρτες κανόνων για τυπικά πεδία (email, τηλέφωνο, κωδικός πρόσβασης, διεύθυνση, IBAN, ημερομηνία).
Οδηγοί για απομυθοποίηση, ασύγχρονο έλεγχο και συμπεριφορά εκτός σύνδεσης.
Υποδείγματα κειμένου για συχνά σφάλματα και πριν/μετά παραδείγματα.

Σύντομη περίληψη

Η ενσωματωμένη επικύρωση αφορά την προγνωστική φροντίδα, τις σαφείς οδηγίες και την προσεκτική αντιμετώπιση των δεδομένων. Ελέγξτε τοπικά και επί του διακομιστή, εμφανίστε σφάλματα την κατάλληλη στιγμή με συγκεκριμένες ενέργειες, σεβαστείτε τη διαθεσιμότητα και την ιδιωτικότητα, αποθηκεύστε την πρόοδο και χρησιμοποιήστε τις απομυθοποιήσεις. Έτσι οι μορφές γίνονται φιλικές, και τα λάθη γίνονται γρήγορα και σταθερά.