Por exemplo, validação de e-mail com JavaScript (Regex)

Muitas vezes nos deparamos com a necessidade de validar que um endereço de e-mail foi inserido em um determinado campo do nosso formulário. email válido. Neste artigo, aprenderemos como validar e-mails usando expressões regulares (também conhecidas como regex) em JavaScript.

O que é uma expressão regular (regex)?

Uma expressão regular é uma sequência de caracteres que define um padrão de pesquisa. Nesse caso, queremos encontrar um padrão que represente um endereço de e-mail válido.

As expressões regulares são uma ferramenta poderosa e flexível para trabalhar com strings de texto e validar dados de entrada.

Validação de e-mail com regex

Para validar que um e-mail é válido, temos que verificar se o formato está correto, ou seja, se inclui um @ e um domínio. Para isso utilizamos a seguinte expressão:

var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

Exemplo de Formulário Completo

No exemplo a seguir, mostramos como validar um endereço de e-mail usando JavaScript e uma expressão regular. Os passos que seguimos são:

1. Definimos uma função chamada validarMail que leva como argumento o e-mail para validar.
2. Criamos uma variável regex A contendo a expressão regular para validar o e-mail.
3. Usamos o método teste() da expressão regular para verificar se o e-mail inserido corresponde ao padrão.
4. Se o e-mail for válido, exibimos uma mensagem de alerta indicando que é válido; caso contrário, exibimos uma mensagem de alerta indicando que é inválido.
5. No HTML, criamos um campo de entrada do tipo "email" e um botão que, ao ser clicado, chama a função validarMail com o valor inserido no campo de entrada.

function validEmail (mail) {
// Expressão regular para validar email
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// Verifica se o e-mail corresponde ao padrão definido pela expressão regular
if (regex.test (mail)) {
alert("Email válido");
} else {
alert ("E-mail inválido");
}
}

Validação de e-mail com JavaScript e regex

Validar

Vantagens e Desvantagens de validar com JavaScript

A validação de dados de entrada, como endereços de e-mail, usando JavaScript no lado do cliente tem vantagens e desvantagens:

Vantagens	Desvantagens
Feedback imediato para o usuário	Não é seguro
Menos carga no servidor	Compatibilidade entre navegadores
Melhore a experiência do usuário	Duplicação de esforço (lado cliente/servidor)
Redução do tempo de resposta	Não substitui a validação no lado do servidor

A validação de dados usando JavaScript não substitui a validação do lado do servidor. No entanto, ajuda a reduzir a carga. Para validar os dados no lado do servidor, recomendo que você leia:

• Validação de email com PHP