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

1
2
3
4
5
6
7

<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

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready(function() {
	$("#formulario").submit( function() {
		 if ($("#email").val() != '') {
			  var regmail = /^[\w!#$%&'*+\/=?^`{|}~-]+(\.[\w!#$%&'*+\/=?^`{|}~-]+)*@(([\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