Επικύρωση HTML5 Email

Λέγεται "Με την HTML5, δεν χρειαζόμαστε πλέον js ή κώδικα από την πλευρά του διακομιστή για να ελέγξουμε αν η είσοδος του χρήστη είναι έγκυρο email ή διεύθυνση url&quot,

Πώς μπορώ να επικυρώσω το email μετά την είσοδο ενός χρήστη; και χωρίς JS πώς να εμφανίσω ένα μήνυμα αν ο χρήστης εισάγει μια λάθος μορφή της διεύθυνσης email του.

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

Στην HTML5 μπορείτε να κάνετε κάτι τέτοιο:


<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">

Και όταν ο χρήστης πατήσει submit, εμφανίζεται αυτόματα ένα μήνυμα σφάλματος όπως:

Σχόλια (12)

Η σελίδα input type=email του ιστότοπου www.w3.org σημειώνει ότι μια διεύθυνση ηλεκτρονικού ταχυδρομείου είναι οποιαδήποτε συμβολοσειρά που ταιριάζει με την ακόλουθη κανονική έκφραση:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Χρησιμοποιήστε το χαρακτηριστικό required και ένα χαρακτηριστικό pattern για να απαιτήσετε η τιμή να ταιριάζει με το μοτίβο regex.

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>
Σχόλια (8)

Είναι πολύ δύσκολο να επικυρώσετε σωστά το Email χρησιμοποιώντας απλώς το χαρακτηριστικό HTML5 "pattern". Εάν δεν χρησιμοποιήσετε ένα "μοτίβο" someone@ θα υποβληθεί σε επεξεργασία. το οποίο ΔΕΝ είναι έγκυρο email.

Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" θα απαιτήσει η μορφή να είναι someone@email.com ωστόσο αν ο αποστολέας έχει μορφή όπως someone@email.net.au (ή παρόμοια) δεν θα επικυρωθεί για να το διορθώσετε αυτό θα μπορούσατε να βάλετε pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" αυτό θα επικυρώσει ".com.au ή .net.au ή κάτι παρόμοιο.

Ωστόσο, χρησιμοποιώντας αυτό, δεν θα επιτρέψει στο someone@email.com να επικυρώσει. Έτσι, όσον αφορά την απλή χρήση της HTML5 για την επικύρωση διευθύνσεων ηλεκτρονικού ταχυδρομείου δεν είναι ακόμα εντελώς μαζί μας. Για να το ολοκληρώσετε αυτό θα πρέπει να χρησιμοποιήσετε κάτι τέτοιο:


<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">

ή:


<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">

Ωστόσο, δεν ξέρω πώς να επικυρώσω και τις δύο ή όλες τις εκδόσεις των διευθύνσεων ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας το χαρακτηριστικό μοτίβο HTML5.

Σχόλια (3)