Κάθε προγραμματιστής ιστού γνωρίζει το συναίσθημα: έχετε δημιουργήσει μια φόρμα και βρίσκετε ένα βογγητό καθώς συνειδητοποιείτε ότι τώρα πρέπει να επικυρώσετε κάθε πεδίο.
Ευτυχώς, η επικύρωση φόρμας δεν χρειάζεται να είναι επώδυνη. Μπορείτε να χρησιμοποιήσετε κανονικές εκφράσεις για να χειριστείτε πολλές κοινές ανάγκες επικύρωσης.
Τι είναι οι κανονικές εκφράσεις;
Οι τυπικές εκφράσεις περιγράφουν μοτίβα που ταιριάζουν με συνδυασμούς χαρακτήρων σε συμβολοσειρές. Μπορείτε να τα χρησιμοποιήσετε για να αναπαραστήσετε έννοιες όπως «μόνο αριθμοί» ή «ακριβώς πέντε κεφαλαία γράμματα».
Οι κανονικές εκφράσεις (ονομάζονται επίσης regex) είναι ισχυρά εργαλεία. Έχουν πολλές χρήσεις, συμπεριλαμβανομένων των λειτουργιών σύνθετης αναζήτησης, εύρεσης και αντικατάστασης και επικύρωσης σε συμβολοσειρές. Μια διάσημη εφαρμογή κανονικών εκφράσεων είναι την εντολή grep στο Linux.
Γιατί να χρησιμοποιήσετε κανονικές εκφράσεις για επικύρωση;
Υπάρχουν πολλά τρόπους επικύρωσης εισαγωγής φόρμας, αλλά οι κανονικές εκφράσεις είναι απλές, γρήγορες και βολικές στη χρήση, αν καταλαβαίνετε πώς.
Η JavaScript έχει εγγενή υποστήριξη για κανονικές εκφράσεις. Αυτό σημαίνει ότι η χρήση τους για επικύρωση σε αντίθεση με μια εξωτερική βιβλιοθήκη βοηθά να διατηρήσετε το μέγεθος της εφαρμογής Ιστού σας όσο το δυνατόν μικρότερο.
Οι τυπικές εκφράσεις είναι επίσης ικανές να επικυρώσουν πολλούς τύπους εισαγωγής φόρμας.
Βασικά κανονικών εκφράσεων
Οι κανονικές εκφράσεις αποτελούνται από σύμβολα που περιγράφουν μοτίβα που σχηματίζονται από χαρακτήρες σε μια συμβολοσειρά. Στο JavaScript, μπορείτε να δημιουργήσετε μια τυπική έκφραση κυριολεκτικά γράφοντάς την ανάμεσα σε δύο κάθετες προς τα εμπρός. Η απλούστερη μορφή μιας κανονικής έκφρασης μοιάζει με αυτό:
/abc/Η παραπάνω τυπική έκφραση θα ταιριάζει με οποιαδήποτε συμβολοσειρά που περιλαμβάνει τους χαρακτήρες "a", "b" και "c" με αυτή τη σειρά, διαδοχικά. Η συμβολοσειρά "abc" θα ταιριάζει με αυτήν την κανονική έκφραση, καθώς και με μια συμβολοσειρά όπως "abcdef".
Μπορείτε να περιγράψετε πιο προηγμένα μοτίβα χρησιμοποιώντας ειδικούς χαρακτήρες στις κανονικές σας εκφράσεις. Οι ειδικοί χαρακτήρες δεν αντιπροσωπεύουν έναν κυριολεκτικό χαρακτήρα, αλλά κάνουν το regex σας πιο εκφραστικό.
Μπορείτε να τα χρησιμοποιήσετε για να καθορίσετε ότι ένα μέρος του μοτίβου θα πρέπει να επαναλαμβάνεται ορισμένες φορές ή για να υποδείξετε ότι κάποιο από το μοτίβο είναι προαιρετικό.
Ένα παράδειγμα ειδικού χαρακτήρα είναι το "*". Ο χαρακτήρας "*" τροποποιεί είτε έναν μεμονωμένο χαρακτήρα είτε μια ομάδα χαρακτήρων που εμφανίζονται πριν από αυτόν. Δηλώνει ότι αυτοί οι χαρακτήρες μπορεί να απουσιάζουν ή να επαναλαμβάνονται πολλές φορές στη σειρά. Για παράδειγμα:
/abc*/
Θα ταιριάζει με το "ab" ακολουθούμενο από οποιονδήποτε αριθμό χαρακτήρων "c". Η συμβολοσειρά "ab" είναι ένα έγκυρο παράδειγμα αυτού του μοτίβου, επειδή ο χαρακτήρας "c" είναι προαιρετικός. Οι συμβολοσειρές "abc" και "abccccc" είναι εξίσου έγκυρες, επειδή το "*" σημαίνει ότι το "c" μπορεί να επαναληφθεί οποιεσδήποτε φορές.
Η πλήρης σύνταξη regex χρησιμοποιεί αρκετούς ακόμη χαρακτήρες μοτίβων για να περιγράψει πιθανές αντιστοιχίσεις. Μπορείτε να μάθετε περισσότερα από Το Regexlearn.com's Regex 101 διαδραστικό μάθημα. Οδηγός JavaScript του MDN είναι επίσης πολύ χρήσιμο.
Επικύρωση φόρμας με κανονικές εκφράσεις
Μπορείτε να χρησιμοποιήσετε το regex για να επικυρώσετε την εισαγωγή της φόρμας με δύο τρόπους. Ο πρώτος τρόπος είναι να χρησιμοποιήσετε JavaScript. Περιλαμβάνει μερικά βήματα:
- Λάβετε την τιμή της εισαγωγής της φόρμας.
- Ελέγξτε αν η τιμή της εισαγωγής ταιριάζει με την κανονική έκφραση.
- Εάν δεν το κάνει, εμφανίστε στον χρήστη του ιστότοπου ότι η τιμή του πεδίου εισαγωγής δεν είναι έγκυρη.
Εδώ είναι ένα σύντομο παράδειγμα. Δίνεται ένα πεδίο εισαγωγής όπως αυτό:
<σύμβολο κράτησης θέσης εισαγωγής="Πεδίο εισαγωγής">Μπορείτε να γράψετε μια συνάρτηση για να την επικυρώσετε ως εξής:
λειτουργίαεπικυρώνω() {
αφήνω αξία = έγγραφο.querySelector("input").value;
συνθ regEx = /^.{3,7}$/;
ΕΠΙΣΤΡΟΦΗ regEx.test (τιμή);
}Ένας άλλος τρόπος είναι να επωφεληθείτε από τις δυνατότητες επικύρωσης φόρμας HTML του προγράμματος περιήγησης. Πως? Καθορίζοντας το regex ως την τιμή του χαρακτηριστικού μοτίβου της ετικέτας εισαγωγής HTML.
Το χαρακτηριστικό μοτίβο ισχύει μόνο για τους ακόλουθους τύπους εισαγωγής: κείμενο, τηλ, email, url, κωδικός πρόσβασης και αναζήτηση.
Ακολουθεί ένα παράδειγμα χρησιμοποιώντας το χαρακτηριστικό πρότυπο:
<μορφή>
<σύμβολο κράτησης θέσης εισαγωγής="Πεδίο εισαγωγής" απαιτούμενο μοτίβο="/^.{3,7}$/">
<κουμπί>υποβάλλουν</button>
</form>Εάν υποβάλετε τη φόρμα και η τιμή της εισαγωγής δεν ταιριάζει με ολόκληρο το regex, η φόρμα θα εμφανίσει ένα προεπιλεγμένο σφάλμα που μοιάζει με αυτό:
Εάν η τυπική έκφραση που παρέχεται στο χαρακτηριστικό μοτίβο δεν είναι έγκυρη, το πρόγραμμα περιήγησης θα αγνοήσει το χαρακτηριστικό.
Κοινά μοτίβα Regex για επικύρωση φόρμας
Η δημιουργία και ο εντοπισμός σφαλμάτων regex από την αρχή μπορεί να πάρει κάποιο χρόνο. Ακολουθούν ορισμένες δηλώσεις regex που μπορείτε να χρησιμοποιήσετε για να επικυρώσετε ορισμένους από τους πιο συνηθισμένους τύπους δεδομένων φόρμας.
Κανονική έκφραση για επικύρωση μήκους συμβολοσειράς
Μία από τις πιο κοινές απαιτήσεις επικύρωσης είναι ο περιορισμός στο μήκος μιας συμβολοσειράς. Η τυπική έκφραση που θα ταιριάζει με μια συμβολοσειρά επτά χαρακτήρων είναι:
/^.{7}$/Ο "." είναι ένα σύμβολο κράτησης θέσης που ταιριάζει με οποιονδήποτε χαρακτήρα και το "7" στις σγουρές αγκύλες καθορίζει το όριο μήκους της συμβολοσειράς. Εάν η συμβολοσειρά έπρεπε να είναι εντός ενός συγκεκριμένου εύρους μήκους, όπως μεταξύ τριών και επτά, η τυπική έκφραση θα μοιάζει με αυτό:
/^.{3,7}$/Και αν η συμβολοσειρά έπρεπε να αποτελείται από τουλάχιστον τρεις χαρακτήρες χωρίς ανώτατο όριο, θα έμοιαζε ως εξής:
/^.{3,}$/Είναι απίθανο το μήκος να είναι η μόνη απαίτηση επικύρωσης για μια εισαγωγή φόρμας. Αλλά συχνά θα το χρησιμοποιείτε ως μέρος μιας πιο περίπλοκης τυπικής έκφρασης, συμπεριλαμβανομένων άλλων συνθηκών.
Κανονική έκφραση για επικύρωση πεδίων μόνο με γράμματα
Ορισμένες εισαγωγές φόρμας δεν χρειάζεται να περιέχουν τίποτα άλλο παρά μόνο γράμματα για να είναι έγκυρα. Η ακόλουθη τυπική έκφραση θα ταιριάζει μόνο με τέτοιες συμβολοσειρές:
/^[a-zA-Z]+$/Αυτή η τυπική έκφραση καθορίζει ένα σύνολο χαρακτήρων που αποτελείται από ολόκληρο το αλφάβητο. Ο ειδικός χαρακτήρας "+" σημαίνει ότι ο προηγούμενος χαρακτήρας πρέπει να εμφανίζεται τουλάχιστον μία φορά, χωρίς ανώτατο όριο.
Κανονική έκφραση για επικύρωση πεδίων μόνο με αριθμό
Η ακόλουθη τυπική έκφραση θα ταιριάζει μόνο με συμβολοσειρές που αποτελούνται εξ ολοκλήρου από ψηφία:
/^\d+$/Η παραπάνω κανονική έκφραση είναι ουσιαστικά η ίδια με την προηγούμενη. Η μόνη διαφορά είναι ότι χρησιμοποιεί έναν ειδικό χαρακτήρα "\d" για να αναπαραστήσει το εύρος των ψηφίων, αντί να τα γράψει.
Κανονική έκφραση για επικύρωση αλφαριθμητικών πεδίων
Οι κανονικές εκφράσεις διευκολύνουν επίσης την επικύρωση αλφαριθμητικών πεδίων. Ακολουθεί μια τυπική έκφραση που θα ταιριάζει μόνο με συμβολοσειρές που αποτελούνται από γράμματα και ψηφία:
/^[a-zA-Z\d]+$/Ορισμένα πεδία είναι αλφαριθμητικά, αλλά επιτρέπουν μερικούς άλλους χαρακτήρες όπως παύλες και κάτω παύλες. Ένα παράδειγμα τέτοιων πεδίων είναι ένα όνομα χρήστη. Ακολουθεί μια τυπική έκφραση που ταιριάζει με μια συμβολοσειρά που αποτελείται από γράμματα, ψηφία, κάτω παύλες και παύλες:
/^(\w|-)+$/Ο ειδικός χαρακτήρας "\w" ταιριάζει με μια ολόκληρη κατηγορία χαρακτήρων, όπως το "\d". Αντιπροσωπεύει το εύρος του αλφαβήτου, των ψηφίων και του χαρακτήρα υπογράμμισης ("_").
Κανονική έκφραση για την επικύρωση αριθμών τηλεφώνου
Ένας αριθμός τηλεφώνου μπορεί να είναι ένα περίπλοκο πεδίο για επικύρωση, επειδή διαφορετικές χώρες χρησιμοποιούν διαφορετικές μορφές. Μια πολύ γενική προσέγγιση είναι να διασφαλιστεί ότι η συμβολοσειρά περιέχει μόνο ψηφία και ότι το μήκος της είναι εντός ενός συγκεκριμένου εύρους:
/^\d{9,15}$/Μια πιο εξελιγμένη προσέγγιση μπορεί να μοιάζει με αυτήν που λαμβάνεται από MDN, το οποίο επικυρώνει αριθμούς τηλεφώνου στη μορφή ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Κανονική έκφραση για επικύρωση ημερομηνιών
Όπως οι αριθμοί τηλεφώνου, οι ημερομηνίες μπορούν επίσης να έχουν πολλές μορφές. Η επικύρωση των ημερομηνιών είναι συνήθως λιγότερο περίπλοκη από τους αριθμούς τηλεφώνου. Γιατί; Οι ημερομηνίες δεν περιέχουν άλλους χαρακτήρες εκτός από ψηφία και παύλες.
Ακολουθεί ένα παράδειγμα που θα επικυρώνει τις ημερομηνίες της μορφής "ΗΗ-ΜΜ-ΕΕΕΕ".
/^\d{2}-\d{2}-\d{4}$/Η επικύρωση με το Regex είναι εύκολη
Οι τυπικές εκφράσεις περιγράφουν μοτίβα που ταιριάζουν με συνδυασμούς χαρακτήρων σε συμβολοσειρές. Έχουν μια ποικιλία εφαρμογών, όπως επικύρωση εισόδου χρήστη από φόρμες HTML.
Μπορείτε να χρησιμοποιήσετε το regex για επικύρωση με JavaScript ή μέσω του χαρακτηριστικού μοτίβου HTML. Είναι εύκολο να δημιουργήσετε κανονικές εκφράσεις για την επικύρωση κοινών τύπων εισόδων φόρμας, όπως ημερομηνίες και ονόματα χρήστη.