Σε αυτό το Οδηγός μαθαίνεις πώς μπορείς να εφαρμόσεις περίπλοκες επικυρώσεις στην ιστοσελίδα σου με τις HTML attributes required και pattern. Αυτές οι λειτουργίες είναι ιδιαίτερα χρήσιμες για να εξασφαλίσεις ότι οι εισαγωγές των χρηστών είναι στην επιθυμητή μορφή και δεν υποβάλλονται κενά πεδία. Θα καθοδηγηθείς μέσα από τα βασικά βήματα και θα δεις πώς μπορείς να χρησιμοποιήσεις αποτελεσματικά αυτά τα attributes στην φόρμα σου.
Κυριότερες Ανακαλύψεις
- Το attribute required εξασφαλίζει ότι ένα πεδίο εισόδου είναι συμπληρωμένο.
- Με το attribute pattern μπορείς να καθορίσεις μια επικύρωση κανονικών εκφράσεων για συγκεκριμένες μορφές.
- Φιλικά προς τον χρήστη μηνύματα λαθών είναι σημαντικά για μια θετική εμπειρία χρήστη.
Οδηγίες Βήμα-προς-Βήμα
Χρήση του required-Attribut
Για να εξασφαλίσεις ότι ένα πεδίο εισόδου πρέπει να συμπληρωθεί, μπορείς να χρησιμοποιήσεις το required-Attribut. Απλά πρόσθεσε το attribute στην ετικέτα σου. Δεν είναι απαραίτητο να προσδιορίσεις μια τιμή· αρκεί απλώς η θέση του attribute.
Αν η φόρμα είναι κενή και προσπαθείς να την υποβάλλεις, ο περιηγητής σου εμφανίζει ένα μήνυμα λάθους, λέγοντας ότι το πεδίο πρέπει να συμπληρωθεί. Έτσι, το required-Attribut βεβαιώνει ότι η εισαγωγή είναι υποχρεωτική.
Συνδυασμός του required με άλλα Attributes
Εκτός από το required-Attribut, μπορείς επίσης να ορίσεις τιμές για minlength και maxlength, ώστε να περιορίσεις τον αριθμό των χαρακτήρων που μπορεί να εισαγάγει ο χρήστης.
Για παράδειγμα, αν ορίσεις ότι πρέπει να εισαχθούν τουλάχιστον 10 χαρακτήρες, αυτό λειτουργεί επίσης σε συνδυασμό με το required-Attribut. Αν ο χρήστης εισάγει λιγότερα από 10 χαρακτήρες, η επικύρωση δεν περνάει.
Εισαγωγή στο attribute pattern
Το attribute pattern σου επιτρέπει να καθορίσεις μια συγκεκριμένη επικύρωση εισόδου μέσω κανονικών εκφράσεων. Εισάγεις ένα πρότυπο κανονικών εκφράσεων (regex) ως string που θα επικυρώνει τον εισαχθέν κείμενο.
Ένα απλό παράδειγμα για ένα πρότυπο regex θα μπορούσε να είναι ότι ο χρήστης πρέπει να εισάγει οποιαδήποτε συμβολοσειρά, ακολουθούμενη από "ABC" στο τέλος. Αυτό θα μπορούσε να μοιάζει ως εξής: .*ABC$.
Μηνύματα Λάθων για μη έγκυρες εισαγωγές
Αν ο χρήστης κάνει μια εισαγωγή που δεν ταιριάζει με το καθορισμένο πρότυπο, λαμβάνει ένα γενικό μήνυμα λάθους, όπως "please match the requested format".
Για να βοηθήσεις τους χρήστες, είναι σημαντικό να παρέχεις ένα πιο εξυπηρετικό μήνυμα λάθους. Αυτό μπορείς να το επιτύχεις χρησιμοποιώντας το attribute title. Ο τίτλος εμφανίζεται ως παρατήρηση στον χρήστη όταν μετακινεί τον κέρσορα του πάνω από το πεδίο εισόδου.
Βελτίωση της Καθοδήγησης του Χρήστη με το Αttribute title
Με το attribute title μπορείς να παρέχεις μια κατανοητή επιστροφή σχετικά με το τι αναμένεται στο πεδίο εισόδου. Για παράδειγμα, μπορείς να χρησιμοποιήσεις τον τίτλο "Εισάγετε ID μείον ακολουθούμενο από πέντε ψηφία" για να καθοδηγήσεις τον χρήστη σχετικά με το τι πρέπει να εισάγει.
Επικύρωση συγκεκριμένων Μοτίβων Εισαγωγής
Ένα άλλο παράδειγμα είναι η επικύρωση για ένα συγκεκριμένο μοτίβο που δέχεται μόνο αριθμούς. Μπορείς να διαμορφώσεις το πρότυπο regex έτσι ώστε να ξεκινάει με ένα συγκεκριμένο πρόθεμα και να επιτρέπει μόνο πέντε ψηφία.
Όταν ο χρήστης εισάγει πολλούς ή πολύ λίγους αριθμούς, ή ακόμα και γράμματα, η επικύρωση θα αποτύχει.
Συμπέρασμα για την Επικύρωση
Με τον συνδυασμό του required και pattern μπορείς να δημιουργήσεις πεδία εισόδου που όχι μόνο εξασφαλίζουν ότι το πεδίο θα συμπληρωθεί, αλλά επίσης ότι οι εισαγωγές αντιστοιχούν στην επιθυμητή μορφή. Επιπλέον, η δυνατότητα παροχής προσαρμοσμένων μηνυμάτων σφάλματος βελτιώνει σημαντικά την εμπειρία του χρήστη.
Σύνοψη
Σε αυτό το εγχειρίδιο έχεις μάθει πως να υλοποιήσεις πολύπλοκες επικυρώσεις σε φόρμες ιστοσελίδων χρησιμοποιώντας τα χαρακτηριστικά required και pattern. Μέσω αυτών των προσεγγίσεων εξασφαλίζεται ότι οι εισαγωγές των χρηστών ανταποκρίνονται στις συγκεκριμένες απαιτήσεις και ότι τα μηνύματα σφάλματος μπορούν να προσαρμοστούν στην επικοινωνία με τους χρήστες.
