JavaScript: Validando campos de email

Aprenda como validar um campo de email.

Estrutura HTML:

<html>
<body>
<form method="post" action="" onSubmit="return ( verifica() )" name="frmEnvia">
   <label for="email">E-mail: </label>
   <input name="email" type="text" class="input" id="email" onblur="checarEmail();" />
   <input name="submit" type="submit" value=" ENVIAR " />
</form>
</body>
</html>

Explicando:
Ao pressionar o botão do tipo “submit”, o evento “onSubmit” será acionado e a função verifica() será chamada. Essa função verifica se algum valor foi digitado. A função que verificará se o valor digitado está no formato correto de email, será chamado quando o campo perder o foco (evento onblur).

Adicionando a função verifica():

<script type="text/javascript">
function verifica() {
  if (document.forms[0].email.value.length == 0) {
    alert('Por favor, informe o seu EMAIL.');
	document.frmEnvia.email.focus();
    return false;
  }
  return true;
}
</script>

Explicando:
Esta função não valida o email e sim verifica se algum valor foi digitado.

Função para validar o email:

<script type="text/javascript">
function checarEmail(){
if( document.forms[0].email.value=="" 
   || document.forms[0].email.value.indexOf('@')==-1 
     || document.forms[0].email.value.indexOf('.')==-1 )
	{
		alert( "Por favor, informe um E-MAIL válido!" );
		return false;
	}
}
</script>

Explicando:
document.forms[]: acessa um array de form. Pode ser pelo índice ou pelo nome (definido no atributo NAME da tag FORM). Utilizamos o valor 0, pela referência ao primeiro Form.
email.value: valor do campo ‘email”.
indexOf: aqui está o x da questão! indexOf faz uma pesquisa pelo valor informado. A utilização do -1 é utilizado para quando não se encontrar uma referência ao texto informado.

Um alerta será dado, se o campo estiver em “branco” ou se não digitar “@” ou se não digitar “.”.

Códido Completo:

<html>
<head>
<script type="text/javascript">
function verifica() {
  if (document.forms[0].email.value.length == 0) {
    alert('Por favor, informe o seu EMAIL.');
	document.frmEnvia.email.focus();
    return false;
  }
  return true;
}
 
function checarEmail(){
if( document.forms[0].email.value=="" 
   || document.forms[0].email.value.indexOf('@')==-1 
     || document.forms[0].email.value.indexOf('.')==-1 )
	{
	   alert( "Por favor, informe um E-MAIL válido!" );
	   return false;
	}
}
</script>
</head>
<body>
<form method="post" action="" onSubmit="return ( verifica() )" name="frmEnvia">
   <label for="email">E-mail: </label>
   <input name="email" type="text" class="input" id="email" onblur="checarEmail();" />
   <input name="submit" type="submit" value=" ENVIAR " />
</form>
</body>
</html>

6 comentários em “JavaScript: Validando campos de email

  • 27 de abril de 2013 em 20:19
    Permalink

    Mto bom. Era o que eu estava procurando 🙂

    Resposta
  • 17 de junho de 2013 em 10:55
    Permalink

    Não é seguro esta validação, pois se o usuário desbloqueiar o javascript, o código não funciona!!!!

    Resposta
    • 25 de junho de 2013 em 10:41
      Permalink

      Obrigado Angelo pela colaboração.

      Fiquem atentos a esta dica.

      Resposta
  • 8 de julho de 2016 em 16:48
    Permalink

    Ajudou demais, muito obrigado !!!

    Resposta

Deixe uma resposta

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