Comment Valider un E-mail en Utilisant JavaScript?

Valider un e-mail est une chose très difficile, mais possible à faire. Dans ce tutoriel, nous allons vous montrer comment valider un e-mail avec JavaScript.

Un email est une chaîne composée de 3 parties: username, @ symbol et domain. La première partie d'une adresse email est le nom de l'utilisateur.

@ Symbol se situe entre le nom d'utilisateur et le domaine de votre adresse électronique.

Le domaine se compose de deux parties: le serveur mail et le domaine de premier niveau. Le serveur mail est le serveur qui héberge le compte email (“Gmail”). Le domaine de premier niveau est l'extension, telles que .com, .net or .info.

Chaque partie d'un nom de domain ne peut contenir plus de 63 caractères.

La première partie contient le suivant:

  • Lettres anglaises majuscules (A-Z) et minuscules (a-z).
  • Chiffres (0-9).
  • Caractères ! # $ % & ' * + - / = ? ^ _ ` { | } ~
  • Caractère . ( point) fourni qu'il ne soit le premier ou le dernier caractère et ne va venir l'un après l'autre.

Pour obtenir un id email valide, on doit utiliser l'expression régulière suivante qui met en relation n'importe quelle adresse e-mail: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/. Ici, chaque modèle a sa propre description.

Créons un code.

1. Ajoutez HTML

Créez html avec les balises <form>, <input> et <button>.

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>

2. Ajoutez JavaScript

Si vous saisissez une adresse électronique valide, en cliquant sur le bouton "validate", le résultat sera bleu, si vous entrez une adresse électronique invalide, le résultat sera rouge.

<script>
function validateEmail(email) {
  var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  return re.test(email);
}
function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid");
    $result.css("color", "blue");
  } else {
    $result.text(email + " is not valid");
    $result.css("color", "red");
  }
  return false;
}
$("#validate").on("click", validate);
</script>

Voici le code complet:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form>
      <p>Saisissez une adresse électronique:</p>
      <input id='email'>
      <button type='submit' id='validate'>Validate!</button>
    </form>
    <h2 id='result'></h2>
    <script>
      function validateEmail(email) {
        var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        return re.test(email);
      }
      function validate() {
        var $result = $("#result");
        var email = $("#email").val();
        $result.text("");
      
        if (validateEmail(email)) {
          $result.text(email + " is valid");
          $result.css("color", "blue");
        } else {
          $result.text(email + " is not valid");
          $result.css("color", "red");
        }
        return false;
      }
      $("#validate").on("click", validate);
    </script>
  </body>
</html>