Er wordt gezegd "Met HTML5, hebben we geen js of een server side code meer nodig om te controleren of de gebruiker's input een geldig email- of url-adres is"
Hoe kan ik valideren e-mail na een gebruiker in te voeren? en zonder JS hoe een bericht weer te geven als de gebruiker een verkeerde vorm van zijn / haar e-mailadres in te voeren.
<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">
In HTML5 kun je het als volgt doen:
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
En wanneer de gebruiker op submit drukt, toont het automatisch een foutmelding zoals:
De input type=email
pagina van de www.w3.org site merkt op dat een email adres elke string is die overeenkomt met de volgende reguliere expressie:
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
Gebruik het vereist
attribuut en een pattern
attribuut om te eisen dat de waarde overeenkomt met het regex patroon.
<input
type="text"
pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
required
>
Het is erg moeilijk om e-mail correct te valideren door simpelweg het HTML5 attribuut "pattern" te gebruiken. Als u geen "pattern" gebruikt, zal iemand@ worden verwerkt. wat GEEN geldige e-mail is.
Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"
zal vereisen dat het formaat [email protected]
is, maar als de afzender een formaat heeft als [email protected]
(of vergelijkbaar) zal dit niet gevalideerd worden om dit op te lossen zou je pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"
dit zal ".com.au of .net.au of iets dergelijks valideren.
Maar als je dit gebruikt, kan [email protected] niet gevalideerd worden. Dus voor zover het simpelweg gebruiken van HTML5 om e-mailadressen te valideren nog niet helemaal bij ons is. Om dit te voltooien zou je iets als dit gebruiken:
<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>
of:
<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>
Ik weet echter niet hoe ik beide of alle versies van e-mailadressen kan valideren met behulp van het HTML5-patroonattribuut.