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 ENVIAR, o evento “onSubmit” do form será acionado chamando a função verifica().
verifica(): 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> |
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á exibido, se o campo de e-mail estiver em “branco” ou se não for digitado o “@” ou “.”.
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> |
Muito bom.
Show!
Mto bom. Era o que eu estava procurando 🙂
Não é seguro esta validação, pois se o usuário desbloqueiar o javascript, o código não funciona!!!!
Obrigado Angelo pela colaboração.
Fiquem atentos a esta dica.
Ajudou demais, muito obrigado !!!
Olá, aconselho revisar.
Pela busca somente do ‘@’ abre uma brecha para o usuário não informar o antecessor a ele.
Tipo se informar ‘@mail.com’ o código não validará uma string antes do ‘@’.