Λέγεται "Με την HTML5, δεν χρειαζόμαστε πλέον js ή κώδικα από την πλευρά του διακομιστή για να ελέγξουμε αν η είσοδος του χρήστη είναι έγκυρο email ή διεύθυνση url",
Πώς μπορώ να επικυρώσω το email μετά την είσοδο ενός χρήστη; και χωρίς JS πώς να εμφανίσω ένα μήνυμα αν ο χρήστης εισάγει μια λάθος μορφή της διεύθυνσης email του.
<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">
Στην HTML5 μπορείτε να κάνετε κάτι τέτοιο:
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
Και όταν ο χρήστης πατήσει submit, εμφανίζεται αυτόματα ένα μήνυμα σφάλματος όπως:
Η σελίδα 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
>
Είναι πολύ δύσκολο να επικυρώσετε σωστά το 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,}"
θα απαιτήσει η μορφή να είναι [email protected]
ωστόσο αν ο αποστολέας έχει μορφή όπως [email protected]
(ή παρόμοια) δεν θα επικυρωθεί για να το διορθώσετε αυτό θα μπορούσατε να βάλετε 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 ή κάτι παρόμοιο.
Ωστόσο, χρησιμοποιώντας αυτό, δεν θα επιτρέψει στο [email protected] να επικυρώσει. Έτσι, όσον αφορά την απλή χρήση της HTML5 για την επικύρωση διευθύνσεων ηλεκτρονικού ταχυδρομείου δεν είναι ακόμα εντελώς μαζί μας. Για να το ολοκληρώσετε αυτό θα πρέπει να χρησιμοποιήσετε κάτι τέτοιο:
<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,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>
ή:
<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">
</form>
Ωστόσο, δεν ξέρω πώς να επικυρώσω και τις δύο ή όλες τις εκδόσεις των διευθύνσεων ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας το χαρακτηριστικό μοτίβο HTML5.