Überprüfen der Telefonnummerneingabe in HTML und JavaScript

Lesezeit: 3 Minuten

April 15, 2024
Autor:in:
Kelley Robinson
Twilion
Prüfer:in:
Diane Phan
Twilion
Liz Moy
Twilion

Falls Sie schon einmal „Telefonnummer RegEx“ gegoogelt und es gleich wieder bereut haben, dann sind Sie hier genau an der richtigen Stelle gelandet. Es gibt zahlreiche gültige Formate für Telefonnummern, aber zum Glück gibt es kostenlose Tools, mit denen wir die Gültigkeit von Telefonnummern überprüfen können.

In diesem Blogbeitrag gehen wir auf zwei verschiedene Möglichkeiten ein, wie die Gültigkeit einer Telefonnummer überprüft werden kann: mit der Twilio Lookup-API und dem JavaScript-Plug-in „intl-tel-input“. Dieser Beitrag baut auf dem Blogbeitrag Erstellen eines Eingabefelds für internationale Telefonnummern in HTML und JavaScript auf. Darin erfahren Sie, wie Sie das Eingabefeld für Telefonnummern erstellen, das ich nachfolgend verwende.

Der vollständige Code befindet sich auf meinem GitHub.

Warum eine Überprüfung der Telefonnummerneingabe

Einer der Gründe, warum wir Telefonnummern überprüfen möchten, ist, Spam und Betrug bei Registrierungen zu vermeiden und einfache Tippfehler abzufangen. Ich gebe am Ende des Blogs auch ein paar Empfehlungen zur Bestätigung via Telefon und einige weitere Best Practices zur Kontosicherheit, da wir nicht nur sicherstellen möchten, dass die bereitgestellte Telefonnummer gültig ist, sondern dass unsere Nutzer:innen auch Zugriff darauf haben.

Einrichten der Telefonnummernüberprüfung

Wenn Sie noch keine Telefonnummerneingabe haben, können Sie mit einer einfachen HTML-Seite beginnen, die die Eingabe einer Telefonnummer zulässt.

This form uses the intl-tel-input plugin which processes the input to the international E.164 standard. This format is used by many APIs, including Twilio's, to ensure standardized input and global support. You can read more about how to build a phone number input field that can provide the E.164 format in this blog post.

Anhand des folgenden Codes erläutere ich im Folgenden die verschiedenen Überprüfungsoptionen. Fügen Sie diesen Code in eine Datei mit dem Namen index.html ein:

<!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>Enter your phone number:</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>

Für einen besseren Stil können Sie das Stylesheet von meinem GitHub herunterladen und es in ein Dokument mit dem Namen styles.css im selben Ordner wie die index.html einfügen.

Testen Sie die Anwendung, indem Sie die HTML-Datei in einen Webbrowser laden. Wie Sie sehen können, löst eine ungültige Telefonnummer keinen Fehler aus:

 

Ungültige Telefonnummerneingabe ohne Fehler

 

Das berichtigen wir jetzt.

Überprüfen von Telefonnummern

Es gibt zwei verschiedene Möglichkeiten für die Überprüfung von Telefonnummern:

  1. Mit der Twilio Lookup-API
  2. Mit dem Plug-in „intl-tel-input“

Überprüfen von Telefonnummern mit der Twilio Lookup-API

Die Twilio Lookup-API-Anfrage ist kostenlos und Sie können sie in jedes beliebige Back-End einbetten. Im Rahmen dieses Tutorials verwenden Sie serverlose JavaScript-Funktionen von Twilio.

  • Vorteile: Die Lookup-API verfügt über aktualisierte Gültigkeitsdaten für Telefonnummern. Sie können die API auch zur Überprüfung der Art der Leitung oder des Netzbetreibers nutzen.
  • Nachteile: Sie benötigt mehr Code und die Anfrage läuft über das Netzwerk.

Für diesen Teil benötigen Sie ein Twilio-Konto: hier kostenlos registrieren. Rufen Sie die Twilio-Konsole auf und erstellen Sie einen Funktionsdienst. Ich habe meinen intl-tel-input benannt.

 

Twilio Funktionsservice namens intl-tel-input

Fügen Sie eine Funktion namens lookup hinzu.

Twilio-Funktion namens lookup

Achten Sie darauf, dass Sie den Funktionstyp auf „Public“ (Öffentlich) einstellen. Das ist erforderlich, weil Sie die Funktion außerhalb von Twilio aufrufen.

Lookup-Funktion auf „public“ gesetzt

Ersetzen Sie den Code durch den folgenden:

function errorStr(errors) {
  return errors
    .map((err) => {
      return err.replaceAll("_", " ").toLowerCase();
    })
    .join(", ");
}

exports.handler = async 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');
  
  try {
    if (typeof event.phone === "undefined") {
      throw new Error("Missing parameter: please provide a phone number.")
    }

    const client = context.getTwilioClient();
    const lookup = await client.lookups.v2.phoneNumbers(event.phone).fetch();

    if (!lookup.valid) { 
      throw new Error(`Invalid phone number ${event.phone}: ${errorStr(
        lookup.validationErrors
      )}`)
    }

    response.setStatusCode(200);
    response.setBody({
      success: true,
    });
    callback(null, response);
  } catch (error) {
    console.error(error);
    response.setStatusCode(400);
    response.setBody({
      success: false,
      error: error.message
    })
    callback(null, response);
  }
};

Update the twilio library dependency to version 4.23.0 or later before you deploy your Twilio function. From the Twilio Console function editor, navigate to Settings & More >> Dependencies to make changes.

Diese Funktion schlägt die Telefonnummer nach und gibt „success: true“ zurück, wenn die API ermittelt, dass sie gültig ist, und „false“, falls das nicht der Fall ist. Bei einer ungültigen Telefonnummer gibt die Funktion auch eine durch Kommata getrennte Liste mit Gründen wie „zu kurz“, „zu lang“, „ungültige Landesvorwahl“ oder „keine Nummer“ zurück.

Klicken Sie unten auf „Deploy All“ (Alle bereitstellen).

Sie können die Funktion im Browser testen, indem Sie einen Abfrageparameter hinzufügen: http://<Ihr-Präfix>.twil.io/lookup?phone=+18448144627

{"success":true} sollte angezeigt werden.

Rufen Sie die Funktion nun von Ihrer Anwendung aus auf. Ersetzen Sie die Funktion process durch Folgendes. Achten Sie dabei darauf, dass Sie die URL innerhalb des fetch-Aufrufs durch die URL für die Twilio-Funktion ersetzen:

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.error(json.error);
       error.style.display = "";
       error.innerHTML =  json.error;
     }
   })
   .catch((err) => {
     error.style.display = "";
     error.innerHTML = `Something went wrong: ${err}`;
   });
}

Wenn Sie jetzt versuchen, eine ungültige Nummer einzugeben, erhalten Sie eine Fehlermeldung und den entsprechenden Grund:

ungültige Telefonnummer '123': 'zu kurz'

Überprüfen von Telefonnummern mit dem Plug-in „intl-tel-input“

Folgen Sie den Anweisungen in diesem Blogbeitrag oder in der Dokumentation für das Plug-in, um „intl-tel-input“ zu unserer Website hinzuzufügen. Alternativ können Sie den oben bereitgestellten HTML-Code verwenden. Neben dem Erstellen von praktischen Eingabeformularen stellt das Plug-in „intl-tel-input“ auch einen Wrapper für „libphonenumber“ von Google bereit, um gültige und ungültige Telefonnummern erkennen zu können.

  • Vorteile: Weniger Code, vor allem, wenn Sie bereits das Plug-in für die Telefonnummerneingabe verwenden.
  • Nachteile: Gültige Telefonnummern ändern sich und Sie müssen sich auf Plug-in-Updates verlassen, um Updates in „libphonenumber“ nicht zu versäumen. Sie könnten Gefahr laufen, einige gültige Nutzer:innen zu sperren.

Ersetzen Sie den Funktionscode process durch den folgenden:

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.`;
 }
}

Das Ergebnis sollte der Version mit der Lookup-API entsprechen.

Beide Möglichkeiten sind gute Optionen, um Telefonnummern zu überprüfen. Ich persönlich tendiere zur Lookup-API, da Sie an dieser Stelle wahrscheinlich ohnehin eine API-Anfrage stellen werden, um eine Bestätigung via Telefon zu starten und Nutzer:innen in der Datenbank zu speichern.

Best Practices für Kontosicherheit

Die Überprüfung von Telefonnummern ist nur eine Möglichkeit, Betrug vorzubeugen und den Schutz Ihrer Anwendung und der Nutzerdaten sicherzustellen.

Ich empfehle immer eine Bestätigung via Telefon. Dafür gibt es zwar mehrere Optionen, aber das Senden eines Einmalkennworts (One-Time Passwords, OTP) an die Telefonnummer ist eine gute Möglichkeit, den Besitz einer Nummer gleich beim ersten Erhalt dieser Informationen zu gewährleisten. Dadurch können Sie nicht nur einfache Tippfehler vermeiden, sondern sich auch davor schützen, dass Nutzer:innen falsche Nummern eingeben. Erfahren Sie mehr über darüber, wie OTPs mit der Twilio Verify-API implementiert werden.

Das könnte Sie außerdem interessieren:

Ich bin gespannt, welche Projekte Sie entwickeln und speichern.

Verwandte Posts

Ähnliche Ressourcen

A newspaper article

Twilio Docs

Von APIs über SDKs bis hin zu Beispiel-Apps

API-Referenzdokumentation, SDKs, Hilfsbibliotheken, Schnellstarts und Tutorials für Ihre Sprache und Plattform.
An Open book

Ressourcen-Center

Die neuesten E-Books, Branchenberichte und Webinare

Lernen Sie von Customer-Engagement-Experten, um Ihre eigene Kommunikation zu verbessern.
User group reactions

Ahoy

Twilios Entwickler-Community-Hub

Best Practices, Codebeispiele und Inspiration zum Aufbau von Kommunikations- und digitalen Interaktionserlebnissen.