Validação de e-mail HTML5

Em HTML5 você pode fazer assim:

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

E quando o usuário pressiona enviar, ele automaticamente mostra uma mensagem de erro como:

A página input type=email do site www.w3.org observa que um endereço de e-mail é qualquer string que corresponda à seguinte expressão regular:

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

Utilize o atributo required e um atributo pattern para requerer o valor correspondente ao padrão regex.

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

É muito difícil validar corretamente o Email simplesmente usando o atributo &quot HTML5;pattern". Se você não usar um "pattern" alguém@ será processado. o que NÃO é um email válido.

Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.O formatosomeone@email.com', porém se o remetente tiver um formato como someone@email.net.au' (ou similar) não será validado para corrigir isso você poderá colocarpattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"` isto validará ".com.au ou .net.au ou similares.

No entanto, utilizando isto, não permitirá que o someone@email.com valide. Por isso, a simples utilização do HTML5 para validar endereços de e-mail ainda não está totalmente connosco. Para completar isto, você usaria algo como isto:

<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">

ou..:

<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">

No entanto, não sei como validar ambas ou todas as versões de endereços de e-mail usando o atributo padrão HTML5.