Validar e-mail com jQuery

Você já precisou validar a inclusão de um endereço de email em seus formulários?
Com jQuery e Expressões Regulares é super simples. Vamos lá!

Quem ainda não sabe nada sobre jQuery pode conferir clicando aqui
Quem ainda não sabe nada sobre Expressões Regulares pode conferir clicando aqui e aqui

<form id="formulario" method="post">
    <fieldset>
        <label for="email">E-mail</label>
        <input id="email" class="validaemail" name="email" size="30" type="text" />
        <input name="enviar" type="submit" value="Enviar" />
    </fieldset>
</form>

Como podem ver, o código XHTML acima é simples e não requer explicação adicional. Quem tiver dúvidas pode perguntar nos comentários

$(document).ready(function() {
	$("#formulario").submit( function() {
		 if ($("#email").val() != '') {
			  var regmail = /^[\w!#$%&amp;'*+\/=?^`{|}~-]+(\.[\w!#$%&amp;'*+\/=?^`{|}~-]+)*@(([\w-]+\.)+[A-Za-z]{2,6}|\[\d{1,3}(\.\d{1,3}){3}\])$/;
			  if (regmail.test($("#email").val())) {
				   alert("E-mail válido");
			  } else {
				   alert("E-mail inválido");
				   return false;
			  }
		 }
	});
});

Explicação do script

Linha 1 – Indicamos que o script só será executado após o carregamento do documento pelo browser.
Linha 2 – Atribuímos uma função ao evento submit do formulário. Ou seja, antes do envio do formulário será executado o código de verificação do e-mail.
Linha 3 – Verificamos se algo foi digitado no campo “#email”
Linha 4 – Criamos uma variável com a ER utilizada para validar o e-email. Neste artigo não irei explicar o funcionamento desta ER.
Linha 5 – Submetemos o valor digitado no campo “#email” à ER utilizando o método test do javascript

Esta função retorna true caso o valor digitado no campo “#email” seja válido ou false caso seja um e-mail inválido.

Se quiser ver o script em funcionamento clique aqui

Já que chegou até aqui, que tal ler isto?

Este post não tem posts relacionados

Julio Bitencourt: dia 19 de março de 2009

Djalma Toledo disse:

Achei bem legal validação de email com Jquery… Mas achei um pouco complicado já que a função do Jquery é simplificar os códigos.
Eu costumo usar este código que postei logo abaixo.
Se com o jquery for melhor e tiver alguma vantagem, mandai ai Por favor.

Valeu Julio pela força mais uma vez…

function valida(theForm){

if (isBlank(theForm.email)){
alert(”Preencha o campo \”email\”.”);
return false;
}
else if (!isMail(theForm.email)) {
alert(”Formato incorreto de e-mail.”);
return false;
}
if (theForm.submit) {
alert(”msg enviada com susseso”);
}
return true;
}
20 de março de 2009 às 7:17 pm
Tiago disse:

Muito bom o código, valeu!!!.

Criei uma função para facilitar as coisas:

function val_email(email)
{
var regmail = /^[\w!#$%&'*+\/=?^`{|}~-]+(\.[\w!#$%&'*+\/=?^`{|}~-]+)*@(([\w-]+\.)+[A-Za-z]{2,6}|\[\d{1,3}(\.\d{1,3}){3}\])$/;
if(regmail.test(email))
return true;
else
return false;
}
:d
13 de janeiro de 2010 às 9:18 am
Julio Bitencourt disse:

Realmente a função ajuda muito na hora de reutilizar o código! Obrigado pela contribuição!
13 de janeiro de 2010 às 9:34 am