Como Verificar um Endereço de E-mail em JavaScript?

Método de Expressão Regular

Expressões regulares (regex) são úteis para validação de e-mail em JavaScript. Um padrão de regex pode verificar se um endereço de e-mail segue o formato correto.

Aqui está um padrão básico de regex para validação de e-mail:

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

Este padrão verifica:

• Caracteres que não são espaços ou símbolos @
• Um símbolo @
• Mais caracteres que não são espaços ou símbolos @
• Um ponto
• Terminando com caracteres que não são espaços ou símbolos @

Vantagens de usar regex:

• Flexível e personalizável
• Pode lidar com regras complexas
• Processamento rápido

Desvantagens de usar regex:

• Pode ser difícil de ler e manter
• Pode perder alguns casos extremos
• Padrões rígidos podem rejeitar e-mails válidos

const emailRegex = new RegExp(
  '^[^\\s@]+@' +    // Início, um ou mais caracteres que não sejam espaço ou @
  '[^\\s@]+\\.' +   // @, um ou mais caracteres que não sejam espaço ou @, depois um ponto
  '[^\\s@]+$',      // Um ou mais caracteres que não sejam espaço ou @, depois fim
  'i'               // Flag de insensibilidade a maiúsculas e minúsculas
);

Validação Integrada do HTML5

O HTML5 inclui validação de e-mail usando o atributo type="email" em campos de entrada.

Exemplo:

<input type="email" id="email" name="email" required>

Este método:

• Fornece validação básica do formato de e-mail
• Aciona mensagens de erro do navegador
• Funciona sem JavaScript

Suporte do navegador:

• A maioria dos novos navegadores suporta type="email"
• Navegadores antigos podem tratá-lo como uma entrada de texto
• A validação pode diferir entre navegadores

A validação HTML5 é frequentemente usada com JavaScript para mais controle sobre o processo e feedback do usuário.

<form id="emailForm">
  <input type="email" id="email" name="email" required>
  <button type="submit">Enviar</button>
</form>

<script>
document.getElementById('emailForm').addEventListener('submit', function(event) {
  const email = document.getElementById('email').value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailRegex.test(email)) {
    event.preventDefault();
    alert('Por favor, insira um endereço de e-mail válido.');
  }
});
</script>

Criando uma Função de Validação

Para criar uma função de validação de e-mail em JavaScript:

1. Defina a função:

   function validateEmail(email) {
   // Lógica de validação aqui
   }

2. Adicione o padrão regex:

   function validateEmail(email) {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(email);
   }

O padrão regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/ verifica:

• ^: Início da string
• [^\s@]+: Um ou mais caracteres que não são espaço em branco ou @
• @: O símbolo @
• [^\s@]+: Um ou mais caracteres que não são espaço em branco ou @
• \.: Um ponto literal
• [^\s@]+: Um ou mais caracteres que não são espaço em branco ou @
• $: Fim da string

3. Use a função:

   const email = "usuario@exemplo.com";
   if (validateEmail(email)) {
   console.log("Endereço de e-mail válido");
   } else {
   console.log("Endereço de e-mail inválido");
   }

Lidando com a Entrada do Usuário

Para lidar com a entrada do usuário para validação de e-mail:

1. Capture a entrada:

const emailInput = document.getElementById('email-input');
const submitButton = document.getElementById('submit-button');

submitButton.addEventListener('click', function() {
  const userEmail = emailInput.value;
  // Lógica de validação aqui
});

2. Valide e exiba os resultados:

submitButton.addEventListener('click', function() {
  const userEmail = emailInput.value;
  const resultDisplay = document.getElementById('result-display');

  if (validateEmail(userEmail)) {
    resultDisplay.textContent = "Endereço de e-mail válido";
    resultDisplay.style.color = "green";
  } else {
    resultDisplay.textContent = "Endereço de e-mail inválido";
    resultDisplay.style.color = "red";
  }
});

Este código captura sua entrada, valida usando a função validateEmail e exibe o resultado com o estilo adequado.