Como validar email com JavaScript

Neste artigo você vai aprender a validar email com JavaScript, para verificar nos formulários do seu site se o email do visitante está correto

Fala programador(a), beleza? Bora aprender como validar endereços de email em um formulário com JavaScript!

Para resolver problemas de validação complexos utilizamos geralmente expressões regulares, as famosas regex

Isso vai facilitar muito a nossa vida, pois o email vai ser validade em cima de um padrão de caracteres

Um outro ponto importante sobre este tipo de validação é que não devemos criar uma regex tão complexa

Pois podemos acabar deixando alguns provedores ou e-mails de fora da validação

Então a nossa regex será a seguinte: [email protected]

Veja a função que pode validar emails:

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}
    
console.log(validateEmail('[email protected]')); // true
console.log(validateEmail('texto@texto')); // false
console.log(validateEmail('texto.com')); // false
console.log(validateEmail('texto')); // false

Com a regex que está inserida na variável re, nós verificamos o seguite

1. Qualquer tipo de string;
2. Seguida por um caractere @ (que é obrigatório em e-mails);
3. Seguido por algum outro texto, o domínio/provedor;
4. E então temos a presença de um ponto, que também é obrigatório;
5. E por fim mais um texto, validando tanto emails .com quanto .com.br, e outros que tenham terminologias diferentes

Assim, com certeza, alguns e-mails inválidos entrarão nesta lista, porém a validação de front-end funciona mais como uma máscara e não uma checagem de dados

Isso por que tanto o JavaScript quanto o HTML podem ser facilmente manipulados

Tornando imprescindível e obrigatória a validação final ser feita no back-end, que é onde temos como checar totalmente a integridade dos dados sem a interferência do usuário

E de lá podemos retornar uma mensagem de sucesso ou erro, caso seja mal intencionado o valor inserido

A ideia principal é que o front-end não deve travar a aplicação ou deixar a experiência do usuário ruim

Conclusão

Neste artigo vimos como validar email com JavaScript

Utilizamos uma expressão regular para isso, e não forçamos ela para que não prejudique a experiência do usuário

A validação mais pesada deve ser feita no server side, ou seja, no back-end da aplicação

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube