Vérifier la saisie d'un numéro de téléphone avec HTML et JavaScript

Temps de lecture: 4 minutes

June 01, 2021

Rédigé par

Twilion

Vérifier la saisie d'un numéro de téléphone avec HTML et JavaScript

Si vous avez Googlé “regex numéro de téléphone” et que vous l’avez vite regretté, vous êtes au bon endroit. Il y a beaucoup de formats en ce qui concerne les numéros de téléphone, mais heureusement, il y a des outils gratuits que vous pouvez utiliser pour vous assurer de la validité d’un numéro de mobile.

Ce post vous montrera deux façons de vérifier qu’un numéro de téléphone est valide : l’API Twilio Lookup, et le plugin JavaScript intl-tel-input. Cet article se base sur un autre, comment coder un champ de saisie de numéros de téléphone internationaux, auquel vous pouvez vous référer pour plus de détails sur la façon de construire le joli champ de saisie de numéros que j’utilise plus bas.

Vous pouvez trouver le code complet sur mon GitHub.

Pourquoi vous devriez valider les saisies de numéros de téléphone

Vous voulez valider les numéros de téléphone afin d’éviter les inscriptions de spams, les fraudes, et aussi pour éviter les erreurs basiques, comme les fautes de frappe. Nous allons inclure quelques recommandations pour la vérification de téléphone et d’autres sur les bonnes pratiques de sécurisation des comptes à la fin, car vous voudrez aussi certainement vous assurer que l’utilisateur a bien accès au numéro de téléphone fourni - et non seulement que le numéro soit valable.

Paramétrer la vérification de numéros de téléphones

Vous avez peut-être déjà un champ de saisie de numéro, mais si vous partez de rien, vous pouvez utiliser une page HTML basique qui accepte une saisie de numéro de téléphone.

Ce formulaire utilise le plugin intl-tel-input qui traite la saisie au standard international E.164. Ce format est utilisé par beaucoup d'APIs, celles de Twilio incluses, pour garantir la saisie standardisée et le support mondial. Vous pouvez en apprendre plus sur comment coder un champ de saisie de numéro de téléphone qui peut fournir le format E.164 dans cet article.

C’est ce dont je vais me servir pour montrer les options de validation décrites ci-dessous. Entrez ce code dans un fichier nommé index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>International telephone input</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form id="login" onsubmit="process(event)">
        <p>Entrez votre numéro de téléphone:</p>
        <input id="phone" type="tel" name="phone" />
        <input type="submit" class="btn" value="Verify" />
      </form>
      <div class="alert alert-info" style="display: none"></div>
      <div class="alert alert-error" style="display: none"></div>
    </div>
  </body>
  <script>
    const phoneInputField = document.querySelector("#phone");
    const phoneInput = window.intlTelInput(phoneInputField, {
      utilsScript:
        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    const info = document.querySelector(".alert-info");
    const error = document.querySelector(".alert-error");

    function process(event) {
      event.preventDefault();

      const phoneNumber = phoneInput.getNumber();

      info.style.display = "";
      info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
    }
  </script>
</html>

Pour un rendu plus élégant, vous pouvez récupérer la feuille de style sur mon GitHub et la placer dans un document nommé styles.css, dans le même dossier que index.html.

Testez l’application en chargeant le fichier HTML dans un navigateur web. Vous remarquerez qu’un numéro de téléphone invalide n’affiche aucune erreur :

entrée de numéro de téléphone invalide sans erreur

Changeons ça !

Comment vérifier les numéros de téléphone

On passera en revue deux options pour valider les numéros de téléphone:

Utiliser l’API Twilio Lookup
Utiliser le plugin intl-tel-input

Valider les numéros de téléphone avec l’API Twilio Lookup

La requête API Twilio Lookup est gratuite et vous pouvez l’embarquer dans le backend de votre choix. Dans ce tutoriel, vous allez utiliser les fonctions JavaScript serverless de Twilio.

Plus : L’API Twilio Lookup a mis à jour les données de validité du numéro de téléphone. Vous pouvez aussi utiliser l’API pour qu’elle vérifie les types de lignes ou les opérateurs.
Moins : C’est plus de code et une requête réseau.

Pour cette partie, vous aurez besoin d’un compte Twilio - inscrivez-vous ici gratuitement. Dirigez-vous sur la console Twilio et créez un service de fonction : j’ai appelé le mien intl-tel-input.

service twilio function nommé intl-tel-input

Ajoutez une nouvelle fonction et appelez-la lookup.

Assurez-vous que vous avez paramétré le type de la fonction sur “publique”, ce qui est nécessaire puisque qu’on l'appellera en dehors de Twilio.

Remplacez le code par celui-ci :

exports.handler = function (context, event, callback) {
 const response = new Twilio.Response();
 response.appendHeader("Content-Type", "application/json");
 response.appendHeader('Access-Control-Allow-Origin', '*');
 response.appendHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
 response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');

 if (typeof event.phone === "undefined") {
   response.setBody({
     success: false,
     error: "Missing parameter; please provide a phone number.",
   });
   response.setStatusCode(400);
   return callback(null, response);
 }

 const client = context.getTwilioClient();

 client.lookups
   .phoneNumbers(event.phone)
   .fetch()
   .then((resp) => {
     response.setStatusCode(200);
     response.setBody({
       success: true,
     });
     callback(null, response);
   })
   .catch((error) => {
     console.log(error);
     response.setStatusCode(error.status);
     response.setBody({
       success: false,
       error: error.message,
     });
     callback(null, response);
   });
};

Cette fonction va rechercher le numéro de téléphone et afficher "success: true” (succès: vrai) si l’API détermine sa validité et “false” (faux) si elle détermine l’inverse.

Cliquez sur le bouton “Deploy All” (Tout déployer) en bas.

Vous pouvez tester votre fonction dans le navigateur en ajoutant un paramètre de requête : http://<votre-prefixe-ici>.twil.io/lookup?phone=+18448144627

Vous devriez voir {"success":true}.

Maintenant, appelons-la à partir de notre application.

Remplacez la fonction process par la suivante. Assurez-vous d’aussi remplacer l’URL dans l’appel fetch avec l’URL de votre fonction Twilio :

function process(event) {
 event.preventDefault();

 const phoneNumber = phoneInput.getNumber();

 info.style.display = "none";
 error.style.display = "none";

 const data = new URLSearchParams();
 data.append("phone", phoneNumber);

 fetch("http://<your-url-here>.twil.io/lookup", {
   method: "POST",
   body: data,
 })
   .then((response) => response.json())
   .then((json) => {
     if (json.success) {
       info.style.display = "";
       info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
     } else {
       console.log(json.error);
       error.style.display = "";
       error.innerHTML = `Invalid phone number.`;
     }
   })
   .catch((err) => {
     error.style.display = "";
     error.innerHTML = `Something went wrong: ${err}`;
   });
}

Maintenant, si vous essayez de saisir un numéro invalide, vous verrez un message d’erreur :

entrée de numéro de téléphone invalide avec erreur

Valider les numéros de téléphone avec le plugin intl-tel-input

Suivez les instructions de ce post ou de la documentation du plugin pour ajouter intl-tel-input à votre site, ou pour utiliser le code HTML fourni au-dessus. En plus de construire des formulaires de saisie agréables, le plugin intl-tel-input offre un encapsuleur autour de la libphonenumber de Google afin d’aider la détection de numéros de téléphone valide et non-valides.

Plus: Moins de code, surtout si vous utilisez déjà le plugin pour la saisie de numéro de téléphone.
Moins: Les numéros de téléphone valides changent et vous dépendrez des mises à jour du plugin pour attraper ces actualisations dans libphonenumber. Vous pourriez - malgré vous - fermer la porte à des utilisateurs valides.

Remplacez le code de la fonction process par le suivant :

function process(event) {
 event.preventDefault();

 const phoneNumber = phoneInput.getNumber();

 info.style.display = "none";
 error.style.display = "none";

 if (phoneInput.isValidNumber()) {
   info.style.display = "";
   info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
 } else {
   error.style.display = "";
   error.innerHTML = `Invalid phone number.`;
 }
}

Le résultat devrait être le même que ceux de la version API Lookup!

Les deux sont des options solides pour vérifier les numéros de téléphone. Personnellement, j’utiliserais l’API Lookup puisque vous ferez sûrement une requête API à ce stade, pour commencer une vérification de numéro de téléphone et stocker l’utilisateur dans votre base de données.

Bonnes pratiques pour sécuriser les comptes utilisateurs

Valider un numéro de téléphone n’est qu'une façon de contribuer à éviter les fraudes et de s’assurer que vous protégez votre application et les données de vos utilisateurs.

Je recommande toujours la vérification de téléphone - vous pouvez le faire de plusieurs manières, mais envoyer un One-time Passcode (OTP = Mot de passe à usage unique) sur le téléphone de l’utilisateur est une bonne façon de garantir que l’utilisateur possède bien son appareil pour la première fois où il fournit cette info. Ça permet de se protéger des fautes de frappe, ou d’une personne entrant un numéro qu’elle ne possède pas. Allez voir ce projet dans le Twilio Code Exchange pour en apprendre plus sur l’implémentation d’OTPs avec l’API Twilio Verify.

Vous pourriez aussi être intéressés par :

Des questions sur la vérification de numéro de téléphone ? Vous pouvez me trouver sur Twitter: @kelleyrobinson. J’ai hâte de voir ce que vous allez construire.

Articles associés

Ressources connexes

Twilio Docs

Des API aux SDK en passant par les exemples d'applications

Documentation de référence sur l'API, SDK, bibliothèques d'assistance, démarrages rapides et didacticiels pour votre langage et votre plateforme.

Centre de ressources

Les derniers ebooks, rapports de l'industrie et webinaires

Apprenez des experts en engagement client pour améliorer votre propre communication.

Ahoy

Le hub de la communauté des développeurs de Twilio

Meilleures pratiques, exemples de code et inspiration pour créer des expériences de communication et d'engagement numérique.