Neste artigo você vai aprender uma expressão regular para validar e-mail em JavaScript, conhecida também como regex ou regular expression de email

Expressão regular para validar e-mail JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre regex em JavaScript e como validar e-mails!

Neste caso, eu particularmente, prefiro me ater ao simples mas eficaz

Há expressões regulares muito avançadas que podem funcionar para 98% dos e-mails existentes

Mas são tão complexas que deixam alguns e-mails válidos de fora

Diante disso, opto sempre por algo mais generalista para não prejudicar usuários, no padrão:

[email protected]

Desta forma não validaremos caracteres especiais no e-mail e sim se é um texto

Deixamos esta validação para o back-end de sanitização dos inputs, no front apenas rejeitamos os casos obviamente equivados

Como chegar neste resultado então?

A expressão regular será a seguinte:

/\S+@\S+\.\S+/

Podemos aplicar com JavaScript da seguinte forma:

function validarEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

Esta função vai validar um texto utilizando a expressão regular acima mencionada

Tenha em consideração o que falei anteriormente também, provavelmente alguns e-mails inválidos vão passar

Mas é mais uma questão de o usuário ser malicioso do que a regex ser ruim

Pois é melhor deixar estas validações para o back-end, do que impossibilitar um usuário comum de prosseguir no sistema

Lembre-se que você pode perder uma venda por deixar uma expressão regular rígida demais

Usuários leigos podem não entender o que está acontecendo, e então deixar o site

Conclusão

Neste artigo vimos como criar uma expressão regular para validar e-mail JavaScript

Neste caso reforcei os pontos que ela deixa alguns e-mails inválidos passar, mas que não é o trabalho do front-end fazer uma validação tão complexa também

Acredito que o front sirva mais como uma ‘máscara’ para os inputs e o back-end que vai livrar das possíveis invasões

Até por que o JavaScript pode ser facilmente burlado ou desativado

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

Subscribe
Notify of
guest

2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Diogo

Gostei bastante do ponto de vista. vou usar em um projeto estudantil. Estou estudando React. Vou referenciar esse URL ok. Parabéns pelo trabalho e atenção ao usuário.

Battisti

valeu!!