Validando e-mail em inputs HTML com Javascript

Basicamente um email deve possuir as seguintes opç�es em seu campo.

N�o possuir espaços;
Possuir o @;
Possuir algum caracter ap�s o @;
Possuir algum caracter antes do @;
Possuir pelo menos um ponto ap�s o caracter depois do @;
Possuir algum caracter ap�s o ponto.

Exemplos de email v�lido: andre@java.com, andre@java.com.br, andre@java.net .

Como j� � de conhecimento de todos, o email possui duas partes separadas pelo @, nesse caso iremos chamar a primeira de usu�rio e a segunda de dom�nio.

Com base nas opç�es e nas definiç�es acima podemos determinar quais s�o as opç�es que devem ser testadas.

O tamanho do texto dentro de Usu�rio tem que ser maior ou igual a 1(esse valor pode ser alterado), e n�o pode possuir o @ nem espaço em branco.

O dom�nio tem que possuir ponto, n�o pode possuir @ e a posiç�o do primeiro ponto tem que ser maior do que a primeira posiç�o (a primeira posiç�o deve ser uma letra). O �ltimo ponto n�o pode aparecer na ultima posiç�o, n�o pode possuir @ nem espaço em branco tamb�m e o seu tamanho m�nimo � de 3 caracteres.

Neste caso apenas iremos trabalhar com o evento onblur, porque esse � o evento quando o usu�rio acabar de preencher o email e tentar sair para o pr�ximo campo do formul�rio.

Quando o email for inv�lido o sistema ir� mostrar uma mensagem para o usu�rio em uma div informando que o campo � inv�lido ou v�lido, tamb�m optamos por deixar uma mensagem com alert em JavaScript informando inv�lido ou v�lido.

Como j� vimos os eventos e quais opç�es devem ser testadas, precisamos começar a desenvolver o formul�rio.

Vamos começar: primeiro precisamos montar o formul�rio abaixo:

Onde existe a palavra E-mail, um campo input do tipo texto com name email e uma tabela para posicionarmos uma div ao lado do input de maneira simples.

Figura 1: Campo do Formul�rio onde ser� aplicado a validaç�o

Listagem 1: C�digo para criar o input


<form name="f1">
<h3>Formul�rio de Inscriç�o:</h3>
<table>
<tr>
<td>
E-mail:
<input type="text" name="email" onblur="validacaoEmail(f1.email)"  maxlength="60" size='65'>
</td>
<td>
<div id="msgemail"></div>
</td>
</tr>
</table>
</form>

O c�digo acima est� criando um formul�rio com apenas o campo de e-mail que aciona o evento onblur (quando o componente perde o foco). Este input est� dentro de uma c�lula da tabela e na c�lula ao lado existe uma div com id = �msgemail�, div esta onde estaremos escrevendo informaç�es acerca da validaç�o do campo de email.

Listagem 2: C�digo javaScript para validaç�o do campo de email


<script language="Javascript">
function validacaoEmail(field) {
usuario = field.value.substring(0, field.value.indexOf("@"));
dominio = field.value.substring(field.value.indexOf("@")+ 1, field.value.length);

if ((usuario.length >=1) &&
    (dominio.length >=3) && 
    (usuario.search("@")==-1) && 
    (dominio.search("@")==-1) &&
    (usuario.search(" ")==-1) && 
    (dominio.search(" ")==-1) &&
    (dominio.search(".")!=-1) &&      
    (dominio.indexOf(".") >=1)&& 
    (dominio.lastIndexOf(".") < dominio.length - 1)) {
document.getElementById("msgemail").innerHTML="E-mail v�lido";
alert("E-mail valido");
}
else{
document.getElementById("msgemail").innerHTML="<font color='red'>E-mail inv�lido </font>";
alert("E-mail invalido");
}
}
</script>

Explicaç�o dos c�digos acima: ao criar o input de e-mail da Listagem 1, adicionamos para este input o evento onblur, para que ele acione a funç�o validacaoEmail passando como par�metro o componente a ser validado no caso o nome do formul�rio ponto o nome do input (�f1.email�).

Na funç�o criada em JavaScript recebemos o campo de email e separamos as duas partes existentes :

usuario= antes do @
domino= depois do @

Ap�s começamos as validaç�es que j� haviam sido definidas no in�cio do artigo no if na sequencia abaixo:

Tamanho de usu�rio maior ou igual a 1 caracter.
Tamanho do dom�nio maior ou igual a 3 caracteres.
Usu�rio n�o pode conter o @.
Dom�nio n�o pode conter o @.
Usu�rio n�o pode conter o � � espaço em branco.
Dom�nio n�o pode conter o � � espaço em branco.
Dom�nio tem que possuir �.� Ponto.
A posiç�o do primeiro ponto tem que ser maior ou igual a 1, lembrando a posiç�o 0 deve ser ocupado por algum caracter ap�s o @.
A posiç�o do ultimo ponto tem que ser menor que o ultimo caracter, deve ser finalizado o dom�nio por um caracter.

Essas explicaç�es acima foram a validaç�o do e-mail, se todas elas forem satisfeitas, o c�digo entra no if e executa as duas operaç�es a de escrever o conte�do Email v�lido dentro da div e a de mostrar a mensagem de E-mail v�lido.

Se qualquer uma das condiç�es n�o for satisfeita, ser� escrito na div �E-mail Inv�lido� e mostrada a mensagem.

Esta foi uma validaç�o b�sica de e-mail, podendo algumas das restriç�es serem mais espec�ficas quanto ao tamanho ou acrescentadas novas validaç�es. S� lembrando, a validaç�o com o alert e a escrita na div podem ser trocadas por outras operaç�es, foram usadas essas duas opç�es como exemplo por serem mais simples.

Listagem 3: Todo o C�digo como exemplo


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> Validaç�o de E-mail com JavaScript</title>
<script language="Javascript">
function validacaoEmail(field) {
usuario = field.value.substring(0, field.value.indexOf("@"));
dominio = field.value.substring(field.value.indexOf("@")+ 1, field.value.length);
if ((usuario.length >=1) &&
    (dominio.length >=3) && 
    (usuario.search("@")==-1) && 
    (dominio.search("@")==-1) &&
    (usuario.search(" ")==-1) && 
    (dominio.search(" ")==-1) &&
    (dominio.search(".")!=-1) &&      
    (dominio.indexOf(".") >=1)&& 
    (dominio.lastIndexOf(".") < dominio.length - 1)) {
document.getElementById("msgemail").innerHTML="E-mail v�lido";
alert("email valido");
}
else{
document.getElementById("msgemail").innerHTML="<font color='red'>Email inv�lido </font>";
alert("E-mail invalido");
}
}
</script>
</head>
<body>
<form name="f1">
<h3> Validaç�o de E-mail com JavaScript</h3>
<hr color='gray'>
<table>
<tr>
<td>
E-mail:
<input type="text" name="email" onblur="validacaoEmail(f1.email)"  maxlength="60" size='65'>
</td>
<td>
<div id="msgemail"></div>
</td>
</tr>
</table>
<hr color='gray'>
</form>
</body>
</html>

Espero que essas informaç�es sejam �teis, principalmente para quem est� começando agora com JavaScript.

At� o pr�ximo artigo.

Validando e-mail em inputs HTML com Javascript

Veja neste artigo como utilizar JavaScript para criar uma validação de e-mail em inputs com o evento OnBlur.

Artigos relacionados