Expressão regular para validar e-mail JavaScript (regex)

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

Formação Claude Code
Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

  • 120 aulas
  • 4 projetos
  • 9h 45min

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

Escrito por | Matheus Battisti

Matheus Battisti
Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Subscribe
Notify of
guest

2 Comentários
Oldest
Newest Most Voted
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!!

Formações

Formação Vibe Coding

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

  • 474 aulas
  • 20 projetos
  • 39h 27min

Blog | Mais populares