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.