Ισως να χρειαστει καποια στιγμη σε ενα απο τα site που δουλευετε να προσθεσετε ενα πεδιο οπου ο επισκεπτης να εισαγει την email διευθυνση του, παραδειγματος χαρην για να εγγραφει σε ενα newsletter. Καλο θα ηταν λοιπον, να κανουμε εναν υποτυπωδη ελεγχο σε αυτα που ο χρηστης πληκτρολογει. Αυτο ονομαζεται validation και στην συγκεκριμενη περιπτωση email validation. Κατι τετοιο μπορει να γινει με διαφορους τροπους αναλογα το στυλ που ακολουθει ο καθε προγραμματιστης. Τα τελευταια χρονια ομως κερδιζει ολο και περισσοτερο εδαφος η χρηση των RegEx. RegEx σημαινει Regular Expressions και στην ουσια ειναι ας πουμε “κλειδια” μεσω των οποιων μπορουμε να κανουμε τους διαφορους ελεγχους στην πλευρα του client ωστε να μην χρειαζεται ασκοπα να μεταφερθουν πληροφοριες που δεν μπορουμε να επεξεργαστουμε ή αχρηστα δεδομενα στον server. Το πιο συνηθισμενο RegEx για email validation ειναι το /^w+@w+(.w{2,})$/
Το ξερω φαινεται αρκετα περιπλοκο και σε ορισμενες περιπτωσεις η συνταξη RegEx μπορει να αποβει χρονοβορα ομως κερδιζουμε αρκετα σε μεγεθος κωδικα, δηλαδη το site μας ειναι πιο optimized. Αν το παρουμε κομματι-κομματι θα δουμε οτι εντελει δεν ειναι και τοσο τρομακτικο οσο φαινεται.
/ Αρχη του pattern
^ Αρχη του string
w+ Ενα ή περισσοτερα γραμματα,αριθμοι ή underscores
@ Το @συμβολο
w+ Ενα ή περισσοτερα γραμματα,αριθμοι ή underscores
(.w{2,}) Τελεια και επειτα ακολουθυν το λιγοτερο 2 γραμματα,αριθμοι ή underscores
$ Τελος του string
/ Τελος του pattern
Και πως μπορει να χρησιμοποιηθει μεσα σε μια function:
function validateEmail(input) {
var emailPattern = /^w+@w+(.w{2,})$/;
if (emailPattern.test(input)) {
alert("This is a valid e-mail address.");
}
else {
alert("Error: this is NOT a valid e-mail address");
}
}
Αν σας ενδιαφερει το αντικειμενο μπορειτε να διαβασετε περισσοτερα σε αυτο το link.
Ενα demo μπορειτε να δειτε online εδω.