Κάποιος στέλνει τη φόρμα σου με άκυρη διεύθυνση email. Η φόρμα τη δέχεται. Το email καλωσορίσματος επιστρέφει. Δεν ακούει ποτέ από εσένα. Κάποιος άλλος στέλνει τη φόρμα χωρίς υποχρεωτικά πεδία. Η φόρμα περνάει πάλι. Η ομάδα σου έχει ελλιπή δεδομένα. Και οι δύο αποτυχίες συμβαίνουν επειδή ο έλεγχος εγκυρότητας λείπει ή είναι λάθος.
Ο έλεγχος εγκυρότητας είναι η διαδικασία που ελέγχει ότι τα δεδομένα της φόρμας είναι έγκυρα πριν τα δεχτείς. Γίνεται σε δύο σημεία: στον browser και στον server. Και τα δύο μετράνε. Αυτό το άρθρο εξηγεί πώς δουλεύει ο έλεγχος, γιατί χρειάζεσαι και τα δύο και ποια είναι τα συνηθισμένα λάθη.
Τι είναι ο έλεγχος εγκυρότητας;
Ο έλεγχος εγκυρότητας επιβεβαιώνει ότι τα δεδομένα μιας φόρμας τηρούν τους κανόνες σου. Τα υποχρεωτικά πεδία έχουν τιμές. Τα πεδία email έχουν σύμβολο @. Τα πεδία τηλεφώνου έχουν μόνο αριθμούς. Τα αρχεία που ανεβαίνουν είναι κάτω από το όριο μεγέθους.
Χωρίς έλεγχο, μπαίνουν στο σύστημά σου λάθος δεδομένα. Το backend σου καταρρέει. Η υπηρεσία email απορρίπτει μηνύματα. Χάνεις χρόνο να καθαρίζεις βρόμικα δεδομένα.
Ο έλεγχος γίνεται σε δύο σημεία: client-side (στον browser, πριν την αποστολή) και server-side (στον server σου, μετά την αποστολή). Και τα δύο είναι απαραίτητα.
Έλεγχος client-side
Ο browser μπορεί να ελέγξει τα δεδομένα της φόρμας πριν τα στείλει. Η HTML έχει ενσωματωμένα χαρακτηριστικά ελέγχου. Μπορεί να ελέγξει και η JavaScript.
Έλεγχος με HTML
Το <input type="email" required> ελέγχει ότι το πεδίο έχει τιμή και μοιάζει με email. Ο browser δείχνει μήνυμα σφάλματος αν ο χρήστης προσπαθήσει να στείλει άκυρη φόρμα.
Τα χαρακτηριστικά ελέγχου της HTML περιλαμβάνουν το required, που απαιτεί τιμή στο πεδίο, τα min/max για αριθμούς, που κρατούν τις τιμές εντός ορίων, τα minlength/maxlength, που επιβάλλουν αριθμό χαρακτήρων, το pattern, που ταιριάζει κανονικές εκφράσεις, και το type, που ελέγχει τον ίδιο τον τύπο πεδίου. Για παράδειγμα, το type="email" ελέγχει τη μορφή, ενώ το type="number" απορρίπτει μη αριθμητικά δεδομένα.
Ο έλεγχος με HTML δουλεύει αμέσως, χωρίς JavaScript, δίνει καλά μηνύματα σφάλματος από τον browser και προσαρμόζει το πληκτρολόγιο στο κινητό ανάλογα με τον τύπο πεδίου. Τα μειονεκτήματα είναι ότι τα μηνύματα του browser είναι γενικά και κάποιες φορές ασαφή, δεν μπορείς να τα προσαρμόσεις χωρίς JavaScript και ότι διαφορετικοί browsers δείχνουν διαφορετικά μηνύματα.
Έλεγχος με JavaScript
Για περισσότερο έλεγχο, κάνε τον έλεγχο με JavaScript χρησιμοποιώντας function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } και form.addEventListener('submit', (e) => { if (!validateEmail(input.value)) { e.preventDefault(); showError('Please enter a valid email'); } });. Ο έλεγχος με JavaScript σου επιτρέπει να γράψεις δικούς σου κανόνες, να δείξεις δικά σου μηνύματα σφάλματος και να ελέγξεις τα πεδία την ώρα που πληκτρολογεί ο χρήστης, σε πραγματικό χρόνο. Τα μειονεκτήματα είναι ότι χρειάζεται JavaScript (δεν είναι αξιόπιστο για ασφάλεια), θέλει περισσότερο κώδικα για συντήρηση και ίσως δείξει σφάλματα πριν ο χρήστης τελειώσει την πληκτρολόγηση, αν ελέγχεις στο συμβάν input.
Έλεγχος server-side
Αφού σταλεί η φόρμα, ο server ελέγχει ξανά τα δεδομένα. Εδώ γίνεται η πραγματική ασφάλεια.
Μην εμπιστεύεσαι ποτέ τον έλεγχο client-side. Κάποιος μπορεί να απενεργοποιήσει την JavaScript. Κάποιος μπορεί να υποκλέψει το αίτημα και να αλλάξει τα δεδομένα. Κάποιος μπορεί να χρησιμοποιήσει curl ή άλλο εργαλείο και να στείλει λάθος δεδομένα χωρίς να περάσει καθόλου από τη φόρμα σου.
Ο έλεγχος server-side είναι η μόνη προστασία που έχεις. Δεν είναι προαιρετικός.
Όταν ο server λάβει την αποστολή της φόρμας, έλεγξε ότι υπάρχουν τα υποχρεωτικά πεδία, έλεγξε τη μορφή email, τηλεφώνου και URL, έλεγξε ότι οι αριθμοί είναι εντός αναμενόμενων ορίων, επιβεβαίωσε ότι τα αρχεία που ανεβαίνουν έχουν σωστό τύπο και μέγεθος, φρόντισε το μήκος των δεδομένων να μην είναι υπερβολικό και κάνε sanitization στα δεδομένα για να αποφύγεις επιθέσεις injection. Αν ο έλεγχος αποτύχει, στείλε απάντηση σφάλματος, ώστε η φόρμα να μην επεξεργαστεί και ο χρήστης να μάθει τι φταίει. Ο έλεγχος server-side είναι πιο αργός, γιατί ο χρήστης περιμένει απάντηση, αλλά είναι αξιόπιστος και ασφαλής, οπότε κάν' τον πάντα.
Πότε να χρησιμοποιείς κάθε είδος ελέγχου
Ο έλεγχος client-side είναι για την εμπειρία χρήσης. Λέει αμέσως στον χρήστη αν κάτι δεν πάει καλά. Δεν χρειάζεται να στείλει τη φόρμα για να μάθει ότι το email είναι άκυρο.
Ο έλεγχος server-side είναι για την ακεραιότητα των δεδομένων και την ασφάλεια. Φροντίζει να μη μπουν ποτέ λάθος δεδομένα στο σύστημά σου.
Χρησιμοποίησε και τα δύο. Client-side για ταχύτητα και ανατροφοδότηση. Server-side για προστασία και ασφάλεια.
Συνηθισμένα λάθη στον έλεγχο εγκυρότητας
Έλεγχος μόνο client-side
Κάποιος απενεργοποιεί την JavaScript και ο έλεγχός σου χάνεται. Κάποιος χρησιμοποιεί curl για να στείλει με POST λάθος δεδομένα και ο έλεγχός σου δεν τρέχει ποτέ. Καταλήγεις με σκουπίδια στη βάση δεδομένων.
Έλεγχε πάντα στον server. Το client-side είναι έξτρα.
Υπερβολικά αυστηρός έλεγχος
Ο έλεγχος email είναι τόσο αυστηρός που αποτυγχάνουν πραγματικά email. Ο έλεγχος τηλεφώνου δέχεται μόνο αμερικανική μορφή και απορρίπτει διεθνείς αριθμούς. Το πεδίο ονόματος απορρίπτει παύλες, απόστροφους και άλλους έγκυρους χαρακτήρες.
Δοκίμασε τον έλεγχό σου με πραγματικά δεδομένα. Ζήτα από χρήστες από άλλες χώρες να τον δοκιμάσουν. Κάνε τους κανόνες όσο πιο ελαστικούς γίνεται, χωρίς να χάνεις τα λάθος δεδομένα.
Μη σαφή μηνύματα σφάλματος
"Μη έγκυρη τιμή." Τι είναι άκυρο; Ποιο πεδίο; Τι πρέπει να κάνουν;
Τα μηνύματα σφάλματος πρέπει να είναι συγκεκριμένα: "Το email πρέπει να έχει από 5 έως 254 χαρακτήρες." "Το τηλέφωνο πρέπει να έχει 10 ψηφία." "Ο κωδικός πρέπει να περιέχει τουλάχιστον έναν αριθμό."
Δείξε το σφάλμα δίπλα στο πεδίο που το προκάλεσε. Μην κρύβεις τα σφάλματα σε λίστα περίληψης, όπου ο χρήστης πρέπει να τα ψάξει.
Έλεγχος ευαίσθητων δεδομένων στο client
Μη στέλνεις αριθμούς πιστωτικών καρτών ή κωδικούς μέσα από έλεγχο client-side. Μην τους δείχνεις στην κονσόλα του browser. Μην τους καταγράφεις σε logs.
Έλεγχε τα ευαίσθητα δεδομένα μόνο στον server, μέσω HTTPS.
Να μη ελέγχεις τα αρχεία που ανεβαίνουν
Κάποιος ανεβάζει αρχείο 100 megabyte. Ο server σου μένει από χώρο. Κάποιος ανεβάζει εκτελέσιμο αρχείο. Ο server σου κολλάει ιό.
Έλεγξε τον τύπο και το μέγεθος του αρχείου στον server. Έλεγξε ότι το αρχείο είναι πράγματι του τύπου που δηλώνει. Μην εμπιστεύεσαι μόνο την επέκταση αρχείου ή τον τύπο MIME.
Έλεγχος σε πραγματικό χρόνο ή κατά την αποστολή
Ο έλεγχος σε πραγματικό χρόνο ελέγχει κάθε πεδίο καθώς πληκτρολογεί ο χρήστης. Ο χρήστης βλέπει αμέσως μήνυμα σφάλματος αν γράψει κάτι λάθος. Μπορεί να το διορθώσει επιτόπου.
Μειονέκτημα: αν δείχνεις σφάλματα πολύ νωρίς, ο χρήστης εκνευρίζεται. Δείξε σφάλματα μόνο αφού ο χρήστης βγει από το πεδίο (στο συμβάν blur) και όχι όσο ακόμα πληκτρολογεί.
Ο έλεγχος κατά την αποστολή ελέγχει τα πάντα όταν σταλεί η φόρμα. Ο χρήστης συμπληρώνει ολόκληρη τη φόρμα και μετά βλέπει όλα τα σφάλματα μαζί.
Μειονέκτημα: ο χρήστης πρέπει να γυρίσει πίσω και να διορθώσει σφάλματα αφού έχει ήδη στείλει τη φόρμα. Αυτό διακόπτει τη ροή.
Καλή πρακτική: έλεγχε στο blur (όταν ο χρήστης βγαίνει από ένα πεδίο) για ανατροφοδότηση σε πραγματικό χρόνο. Έλεγχε και στην αποστολή ως τελικό έλεγχο. Δείξε όλα τα σφάλματα μαζί, αν αποτύχει κάτι.
Έλεγχος για συγκεκριμένους τύπους πεδίων
Έλεγχος email
Ο πλήρης έλεγχος email είναι σύνθετος (το RFC 5322 έχει 60 σελίδες), οπότε στις περισσότερες περιπτώσεις έλεγξε ότι η τιμή περιέχει @ και domain, με const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;. Αυτό πιάνει τα περισσότερα άκυρα email, χωρίς να είναι τόσο αυστηρό ώστε να αποτυγχάνουν πραγματικά email.
Έλεγχος τηλεφώνου
Η μορφή τηλεφώνου διαφέρει ανά χώρα. Η αμερικανική μορφή είναι (123) 456-7890, η βρετανική +44 20 7946 0958 και η γερμανική +49 30 123456. Δέξου τη διεθνή μορφή, αφαίρεσε τους μη αριθμητικούς χαρακτήρες στον server και αποθήκευσε το τηλέφωνο ως string και όχι ως αριθμό, για να κρατήσεις τα αρχικά μηδενικά που υπάρχουν σε ορισμένες χώρες.
Έλεγχος κωδικού πρόσβασης
Ένας καλός κωδικός είναι μακρύς (τουλάχιστον 12 χαρακτήρες) και δύσκολος να μαντευτεί. Μη ζητάς ειδικούς χαρακτήρες ή συνδυασμό κεφαλαίων και πεζών, γιατί αυτοί οι κανόνες εκνευρίζουν τους χρήστες και δεν βελτιώνουν την ασφάλεια. Καλές απαιτήσεις είναι τουλάχιστον 12 χαρακτήρες και αποφυγή συνηθισμένων μοτίβων (όπως "123456" ή το όνομα του χρήστη). Χρησιμοποίησε δείκτη ισχύος κωδικού, για να δείξεις στον χρήστη πόσο ισχυρός είναι ο κωδικός του.
Έλεγχος ημερομηνίας
Έλεγξε ότι η ημερομηνία είναι στο μέλλον ή στο παρελθόν, ανάλογα με την ανάγκη. Μια φόρμα εγγραφής σε εκδήλωση πρέπει να απορρίπτει ημερομηνίες στο παρελθόν. Μια φόρμα ημερομηνίας γέννησης πρέπει να απορρίπτει ημερομηνίες στο μέλλον.
Φόρμες στο WEMASY
Στον Δημιουργό ιστοσελίδων του WEMASY μπορείς να προσθέσεις φόρμα στην ιστοσελίδα σου.
Δες τι περιλαμβάνει κάθε πακέτο του WEMASY.