Π.χ. επικύρωση email με JavaScript (Regex)

Πολλές φορές μας παρουσιάζεται η ανάγκη να επικυρώσουμε ότι μια διεύθυνση email έχει εισαχθεί σε ένα συγκεκριμένο πεδίο της φόρμας μας. έγκυρο email. Σε αυτό το άρθρο, θα μάθουμε πώς να επικυρώνουμε μηνύματα ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας τυπικές εκφράσεις (γνωστές και ως regex) σε JavaScript.

Τι είναι μια κανονική έκφραση (regex);

Μια τυπική έκφραση είναι μια ακολουθία χαρακτήρων που ορίζει ένα μοτίβο αναζήτησης. Σε αυτήν την περίπτωση, θέλουμε να βρούμε ένα μοτίβο που αντιπροσωπεύει μια έγκυρη διεύθυνση email.

Οι τυπικές εκφράσεις είναι ένα ισχυρό και ευέλικτο εργαλείο για την εργασία με συμβολοσειρές κειμένου και την επικύρωση δεδομένων εισόδου.

Επικύρωση email με regex

Για να επιβεβαιώσουμε ότι ένα email είναι έγκυρο, πρέπει να επαληθεύσουμε ότι η μορφή είναι σωστή, δηλαδή ότι περιλαμβάνει ένα @ και έναν τομέα. Για αυτό χρησιμοποιούμε την ακόλουθη έκφραση:

var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

Παράδειγμα πλήρους φόρμας

Στο παρακάτω παράδειγμα δείχνουμε πώς να επικυρώσετε μια διεύθυνση email χρησιμοποιώντας JavaScript και μια τυπική έκφραση. Τα βήματα που ακολουθούμε είναι:

1. Ορίζουμε μια συνάρτηση που ονομάζεται validateMail που παίρνει ως επιχείρημα το email για επικύρωση.
2. Δημιουργούμε μια μεταβλητή regex A που περιέχει την τυπική έκφραση για την επικύρωση του email.
3. Χρησιμοποιούμε τη μέθοδο δοκιμή() της τυπικής έκφρασης για να ελέγξετε αν το email που καταχωρίσατε ταιριάζει με το μοτίβο.
4. Εάν το email είναι έγκυρο, εμφανίζουμε ένα μήνυμα ειδοποίησης που υποδεικνύει ότι είναι έγκυρο. Διαφορετικά, εμφανίζουμε ένα μήνυμα ειδοποίησης που υποδεικνύει ότι δεν είναι έγκυρο.
5. Στο HTML, δημιουργούμε ένα πεδίο εισαγωγής τύπου "email" και ένα κουμπί που, όταν πατηθεί, καλεί τη συνάρτηση validateMail με την τιμή που έχει εισαχθεί στο πεδίο εισαγωγής.

συνάρτηση validateEmail (mail) {
// Κανονική έκφραση για επικύρωση email
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// Ελέγξτε αν η αλληλογραφία ταιριάζει με το μοτίβο που ορίζεται από την κανονική έκφραση
if (regex.test (ταχυδρομείο)) {
alert("Valid email");
} else {
alert ("Μη έγκυρο email");
}
}

Επικύρωση email με JavaScript και regex

Επικυρώνω

Πλεονεκτήματα και μειονεκτήματα της επικύρωσης με JavaScript

Η επικύρωση δεδομένων εισόδου, όπως διευθύνσεις email, χρησιμοποιώντας JavaScript στην πλευρά του πελάτη έχει πλεονεκτήματα και μειονεκτήματα:

Πλεονεκτήματα	Μειονεκτήματα
Άμεση ανατροφοδότηση για τον χρήστη	δεν είναι ασφαλές
Λιγότερο φορτίο στον διακομιστή	Συμβατότητα πολλαπλών προγραμμάτων περιήγησης
Βελτιώστε την εμπειρία χρήστη	Αλληλεπικάλυψη προσπάθειας (από πλευράς πελάτη/διακομιστή)
Μείωση χρόνου απόκρισης	Δεν αντικαθιστά την επικύρωση από την πλευρά του διακομιστή

Η επικύρωση δεδομένων με χρήση JavaScript δεν υποκαθιστά την επικύρωση από την πλευρά του διακομιστή. Ωστόσο, βοηθά στη μείωση του φορτίου. Για να επικυρώσετε δεδομένα από την πλευρά του διακομιστή, σας συνιστώ να διαβάσετε:

• Επικύρωση αλληλογραφίας με PHP