Comment puis-je valider les adresses e-mail à l'aide d'expressions régulières JavaScript ?

Validation des e-mails avec des expressions régulières en JavaScript

Pour éviter toute saisie erronée de l'utilisateur, JavaScript permet la validation des adresses e-mail avant de tenter de les envoyer à un serveur ou tenter de leur envoyer un e-mail.

L'approche la plus fiable pour vérifier une adresse e-mail en JavaScript consiste à utiliser des expressions régulières. L'expression régulière suivante accepte les caractères ASCII :

const validateEmail = (email) => {
  return String(email)
    .toLowerCase()
    .match(
      /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    );
};

Pour la prise en charge d'Unicode, une expression régulière plus complète peut être utilisée :

const re =
  /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@(([^<>()[\]\.,;:\s@"]+\.)+[^<>()[\]\.,;:\s@"]{2,})$/i;

Cependant, il est crucial de se rappeler que la validation JavaScript ne doit pas dépendre seul. La validation côté client est facilement contournée. La validation côté serveur est également nécessaire.

Voici un exemple de validation d'email JavaScript côté client :

const validateEmail = (email) => {
  return email.match(
    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  );
};

const validate = () => {
  const $result = $('#result');
  const email = $('#email').val();
  $result.text('');

  if(validateEmail(email)){
    $result.text(email + ' is valid.');
    $result.css('color', 'green');
  } else{
    $result.text(email + ' is invalid.');
    $result.css('color', 'red');
  }
  return false;
}

$('#email').on('input', validate);

Dans cet exemple, un bouton permet de déclencher la validation et d'afficher le résultat.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!