Überprüfen der Telefonnummerneingabe in HTML und JavaScript

Lesezeit: 3 Minuten

January 09, 2023
Autor:in:
Kelley Robinson
Twilion
Prüfer:in:
Diane Phan
Twilion
Liz Moy
Twilion

Überprüfen der Telefonnummerneingabe in HTML und JavaScript


Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von How to Validate Phone Number Input in HTML and JavaScript. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

Falls du schon einmal „Telefonnummer RegEx“ gegoogelt und es gleich wieder bereut hast, dann bist du 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 gehe ich auf zwei verschiedene Möglichkeiten ein, wie wir die Gültigkeit einer Telefonnummer überprüfen können: mit der Twilio Lookup-API und dem JavaScript-Plug-in „intl-tel-input“. Dieser Beitrag baut auf meinem Blog Erstellen eines Eingabefelds für internationale Telefonnummern in HTML und JavaScript auf. Darin erkläre ich, wie wir 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 Benutzer auch Zugriff darauf haben.

Einrichten der Telefonnummernüberprüfung

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

Dieses Formular verwendet das Plug-in „intl-tel-input“, das die Eingabe in den internationalen E.164-Standard umwandelt. Dieses Format wird von vielen APIs einschließlich der Twilio-API verwendet, um eine standardisierte Eingabe und weltweite Unterstützung zu gewährleisten. In meinem Blog Erstellen eines Eingabefelds für internationale Telefonnummern in HTML und JavaScript erkläre ich, wie wir ein Eingabefeld erstellen, das das E.164-Format bereitstellen kann.

Anhand des folgenden Codes erläutere ich im Folgenden die verschiedenen Überprüfungsoptionen. Wir fügen 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 wir 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.

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

Ungültige Telefonnummereingabe 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 wir können sie in jedes beliebige Back-End einbetten. Im Rahmen dieses Tutorials verwenden wir serverlose JavaScript-Funktionen von Twilio.

  • Vorteile: Die Lookup-API verfügt über aktualisierte Gültigkeitsdaten für Telefonnummern. Wir 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 wir ein Twilio-Konto: kostenlose Registrierung. Wir rufen die Twilio-Konsole auf und erstellen einen Funktionsdienst. Ich habe meinen intl-tel-input benannt.

Twilio Funktionsservice namens intl-tel-input

Wir fügen eine Funktion hinzu und nennen sie lookup.

Twilio Funktion namens lookup

Wir müssen darauf achten, dass wir den Funktionstyp auf „Public“ (Öffentlich) einstellen. Das ist erforderlich, weil wir die Funktion außerhalb von Twilio aufrufen.

Lookup-Funktion auf public gesetzt

Wir ersetzen den Code durch den folgenden:

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);
   });
};

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.

Wir klicken unten auf „Deploy All“ (Alle bereitstellen).

Wir können unsere Funktion im Browser testen, indem wir einen Abfrageparameter hinzufügen: http://<unser-präfix-hier>.twil.io/lookup?phone=+18448144627

Wir sollten Folgendes sehen: {"success":true}

Wir rufen diese Funktion jetzt über unsere Anwendung auf.

Wir ersetzen die Funktion process durch Folgendes. Dabei müssen wir darauf achten, dass wir die URL innerhalb des fetch -Aufrufs durch die URL für unsere 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.log(json.error);
       error.style.display = "";
       error.innerHTML = `Invalid phone number.`;
     }
   })
   .catch((err) => {
     error.style.display = "";
     error.innerHTML = `Something went wrong: ${err}`;
   });
}

Wenn wir jetzt versuchen, eine ungültige Nummer einzugeben, erhalten wir eine Fehlermeldung:

Ungültige Telefonnummereingabe mit Fehler

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

Wir folgen den Anweisungen in diesem Blog oder in der Dokumentation für das Plug-in, um „intl-tel-input“ unserer Website hinzuzufügen. Alternativ können wir den oben bereitgestellten HTML-Code verwenden. Neben dem Erstellen von gut aussehenden Eingabeformularen stellt das Plug-in „intl-tel-input“ auch einen Wrapper um „libphonenumber“ von Google bereit, um beim Erkennen von gültigen und ungültigen Telefonnummern zu helfen.

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

Wir ersetzen den Code für die Funktion process durch Folgendes:

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 wir an dieser Stelle wahrscheinlich ohnehin eine API-Anfrage stellen werden, um eine Bestätigung via Telefon zu starten und den Benutzer 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 unserer Anwendung und der Daten unserer Benutzer sicherzustellen.

Ich empfehle immer eine Bestätigung via Telefon. Dafür gibt es zwar mehrere Optionen, aber das Senden eines Einmal-Sicherheitscodes (OTP) an die Telefonnummer ist eine gute Möglichkeit, den Besitz der Nummer gleich beim ersten Bereitstellen dieser Informationen durch den Benutzer zu gewährleisten. Dadurch können wir nicht nur einfache Tippfehler vermeiden, sondern uns auch davor schützen, dass ein Benutzer eine Nummer eingibt, die nicht seine eigene ist. In diesem Projekt auf dem Twilio CodeExchange wird anschaulich erklärt, wie OTPs mit der Twilio Verify-API implementiert werden.

Das könnte dich außerdem interessieren:

Noch Fragen zur Bestätigung von Telefonnummern? Du findest mich auf Twitter unter @kelleyrobinson. Ich bin gespannt, von deinen Entwicklungen zu hören.

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.