JQuery: Validando campo de email

Olá pessoal.

Mais um post ensinando como validar um campo do tipo email via JQuery.

Segue código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validando Email</title>
<style type="text/css" media="all">
   body{ font-family:Arial }
   .erro{color:#ED1C24; margin:0}
   .ok{color:#006633; margin:0}	
</style>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
	$("p").hide();
	$('#verificar-email').click(function(){
		//desabilitando o submit do form
		$("form").submit(function () { return false; });
		//atribuindo o valor do campo
		var sEmail	= $("#email").val();
		// filtros
		var emailFilter=/^.+@.+\..{2,}$/;
		var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/
		// condição
		if(!(emailFilter.test(sEmail))||sEmail.match(illegalChars)){
			$("p").show().removeClass("ok").addClass("erro")
			.text('Por favor, informe um email válido.');
		}else{
			$("p").show().addClass("ok")
			.text('Email informado está correto!');
		}
	});
	$('#email').focus(function(){
		$("p.erro").hide();
	});
   });	
</script>
</head>
<body>
<div style="background-color:#CCCCCC;width:275px;padding:10px">
   <form id="form" name="cadastrese" method="post" action="">
      Email <input type="text" name="email" id="email"  />
      <input type="submit" value="EMAIL" id="verificar-email" />        
   </form>
</div>
   <p></p>
</body>
</html>

Explicando:
Mas validar somente um campo? Que site tem apenas um campo para cadastro?
Este tipo de campo é muito utilizado para montar um banco de dados de emails de clientes que gostariam de se manter informado das notícias, promoções e novidades daquele site.

Como a validação é feita?

A validação ocorre quando pressionar o botão #verificar-email.

sEmail: recebe o valor digitado no campo
!(emailFilter.test(sEmail)): o método test() é utilizado para localizar um valor igual na string (sEmail). Se encontrar retorna true. Vale lembrar que estamos utilizando o sinal de exclamação (!) antes, querendo dizer, se for diferente de true, exibe a mensagem.
sEmail.match(illegalChars): verifica se o valor digitado contém alguns dos valores definido na variável illegalChars. O método match() utiliza expressões regulares na busca.

5 comentários em “JQuery: Validando campo de email

  • 30 de setembro de 2011 em 17:25
    Permalink

    PÔ LEGAL

    Resposta
  • 13 de novembro de 2012 em 16:07
    Permalink

    Parabéns pelo post… validação bem funcional.

    Resposta
  • 15 de janeiro de 2013 em 14:04
    Permalink

    Mais uma dica interessante, valeu por postar.

    Resposta
  • 19 de janeiro de 2013 em 12:17
    Permalink

    Puts, bem legal ein, exatamente o que eu estava precisando heehhe

    Resposta
  • 18 de fevereiro de 2014 em 18:52
    Permalink

    bela dica que ajuda a todos

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *