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

Formação Recomendada

Formação Claude Code

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

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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

Validando o email dentro de um formulário:

A função sozinha é legal, mas na vida real tu quer usar ela num formulário de verdade, quando o usuário clica em enviar

Bora ver na prática?

<form id="form"> <input type="text" id="email" placeholder="Digite seu email"> <button type="submit">Enviar</button> <span id="aviso"></span> </form>

E o JavaScript que amarra tudo:

const form = document.getElementById(‘form’); const campoEmail = document.getElementById(‘email’); const aviso = document.getElementById(‘aviso’);

form.addEventListener(‘submit’, function(e) { if (!validateEmail(campoEmail.value)) { e.preventDefault(); aviso.textContent = ‘Email inválido, confere aí!’; } else { aviso.textContent = ‘Email válido =)’; } });

Repara no e.preventDefault(): ele é quem segura o envio do formulário quando o email não passa na validação

Assim o usuário não manda dado furado sem perceber

Validando o email em tempo real:

Dá pra deixar a experiência mto mais massa validando enquanto o usuário digita, sem esperar o clique no botão

Pra isso usamos o evento input, que dispara a cada tecla

campoEmail.addEventListener(‘input’, function() { if (validateEmail(campoEmail.value)) { campoEmail.style.borderColor = ‘green’; } else { campoEmail.style.borderColor = ‘red’; } });

Se liga: aqui a borda do campo fica verde quando o email é válido e vermelha quando não é

É o famoso feedback visual, que ajuda o usuário a corrigir na hora em vez de descobrir o erro só depois de enviar

E dá pra validar email sem JavaScript?

Dá sim, e é bom saber disso

O próprio HTML tem uma validação nativa quando tu usa o input com type="email" junto do atributo required

<input type="email" required>

Aí o navegador já barra o envio se o campo estiver vazio ou sem o formato de email

Porém essa checagem do HTML é bem básica, ela aceita coisas como texto@texto sem o ponto e o domínio completo

Por isso ela combina bem com a validação por regex do JavaScript: o HTML segura o caso óbvio e o JS refina o resto

E lembra sempre: nenhuma das duas substitui a validação no back-end

Perguntas frequentes sobre validar email com JavaScript:

A regex do exemplo valida qualquer email?

Ela valida o padrão [email protected], que cobre a grande maioria dos casos reais

Mas de propósito ela não é super rígida, pra não deixar provedor ou formato de fora e não atrapalhar o usuário

Por que não usar uma regex super complexa?

Porque quanto mais fechada a regex, maior a chance de barrar email válido de algum provedor menos comum

No front-end a ideia é filtrar o erro óbvio, não fazer uma auditoria completa

A validação no JavaScript é segura?

Não pra valer

Tanto o JavaScript quanto o HTML podem ser manipulados pelo usuário, então a validação de front funciona como uma máscara

A checagem que conta mesmo é a do back-end, onde o dado não sofre interferência