Cómo validar el ingreso de números de teléfonos en HTML y JavaScript

Tiempo de lectura: 4 minutos

April 15, 2024

Redactado por

Kelley Robinson

Twilion

Revisado por

Diane Phan

Twilion

Liz Moy

Twilion

Cómo validar el ingreso de números de teléfonos en HTML y JavaScript

Si alguna vez buscaste "expresión regular de un número de teléfono" y te arrepentiste, estás en el lugar correcto. Hay muchos formatos de número de teléfono válidos, pero afortunadamente hay herramientas gratuitas que puedes usar para asegurarte de que un número de teléfono sea válido.

En esta publicación, te explicaremos dos maneras de verificar la validez de un número de teléfono: la API de Twilio Lookup y el plugin para el ingreso de teléfonos internacionales de JavaScript. Esto se basa en la publicación "Cómo crear ingresos de números de teléfonos internacionales en HTML y JavaScript", que puedes consultar para obtener más detalles sobre cómo crear el campo de ingreso de números de teléfono que parezcan correctos que utilizo a continuación.

Puedes encontrar el código terminado en mi GitHub.

¿Por qué debería validar el ingreso de números de teléfonos?

Es necesario validar los números de teléfono para evitar el correo no deseado y los registros fraudulentos, y también para detectar errores sencillos como los errores tipográficos. Incluiremos recomendaciones para la verificación del teléfono y algunas prácticas recomendadas de seguridad de la cuenta al final, ya que, por lo general, también querrás asegurarte de que el usuario tenga acceso al número de teléfono que está proporcionando, no solo que sea un número válido.

Configure la validación del número de teléfono

Es posible que ya tengas un ingreso de número de teléfono, pero si estás comenzando desde cero, puedes utilizar una página HTML básica que acepte un ingreso de número de teléfono.

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.

Esto es lo que usaré para mostrar las opciones de validación que se describen a continuación. Guarda esto dentro de un archivo llamado 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>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>

Para lograr estilos más agradables, puedes obtener la hoja de estilo de GitHub y colocarla en un documento con el nombre styles.css en la misma carpeta que index.html.

Prueba la aplicación cargando el archivo HTML en un navegador web. Notarás que un número de teléfono no válido no genera ningún error:

ingreso de número de teléfono no válido sin error

¡Vamos a solucionarlo!

Cómo validar los números de teléfono

Hay dos opciones para validar los números de teléfono:

Utilizar la API de Twilio Lookup
Utilizar el plugin para ingresar teléfonos internacionales

Valida los números de teléfono con la API de Twilio Lookup

La solicitud de API de Twilio Lookup es gratuita y puedes incrustarla en cualquier actividad en segundo plano que desees. En este tutorial, usaremos las funciones JavaScript sin servidor de Twilio.

Ventajas: La API de Lookup ha actualizado los datos de validez del número de teléfono. También puedes utilizar la API para verificar el tipo de línea o el operador móvil.
Desventajas: Incluye un código más grande y una solicitud de red.

Para esta parte, necesitarás una cuenta de Twilio: regístrate gratis. Dirígete a la consola de Twilio y crea un servicio de funciones, yo nombré al mío intl-tel-input.

servicio de Twilio Functions llamado intel-tel-input

Agrega una función y llámala lookup.

Asegúrate de establecer el tipo de función como "pública", lo cual es necesario, ya que la utilizaremos fuera de Twilio.

Reemplaza el código con lo siguiente:

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.

Esta función buscará el número de teléfono y mostrará "success: true" ("completado: correcto") si la API determina que es válido, y mostrará "false" ("incorrecto") si determina que no lo es. En el caso de un número de teléfono no válido, la función también devolverá una lista de motivos separada por comas como "too short" ("demasiado corto"), "too long" ("demasiado largo"), "invalid country code" ("código de país no válido") o "not a number" ("número no existente").

Presiona "Deploy All" (Implementar todo) en la parte inferior.

Puedes probar la función en el navegador agregando un parámetro de consulta: http://<your-prefix-here>.twl.io/Lookup?phone=+18448144627

Debería aparecer lo siguiente: {"success":true}.

Ahora, utilizaremos esto desde nuestra aplicación. Reemplaza la función process con lo siguiente. Asegúrate de reemplazar la URL dentro de la llamada de fetch con la URL de tu función de 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.error(json.error);
       error.style.display = "";
       error.innerHTML =  json.error;
     }
   })
   .catch((err) => {
     error.style.display = "";
     error.innerHTML = `Something went wrong: ${err}`;
   });
}

Ahora, si intentas ingresar un número no válido, verás un mensaje de error y el motivo correspondiente:

número de teléfono no válido '123': 'demasiado corto'

Valida los números de teléfono con el plugin para el ingreso de teléfonos internacionales

Sigue las instrucciones de esta publicación o de la documentación del plugin para el ingreso de teléfonos internacionales a tu sitio o utiliza el código HTML proporcionado anteriormente. Además de crear buenos formularios de ingreso, el plugin para ingresar teléfonos internacionales proporciona un wrapper alrededor de la Libphonenumber de Google para ayudar a detectar números de teléfono válidos y no válidos.

Ventajas: Incluye un código más chico, especialmente si ya estás utilizando el plugin para el ingreso de un número de teléfono.
Desventajas: Los números de teléfono válidos cambian y dependerás de las actualizaciones de los plugins para que también se actualice la Libphonenumber. Es posible que bloquees algunos usuarios válidos.

Reemplaza el código de función process con lo siguiente:

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

El resultado debe ser el mismo que la versión de la API de Lookup.

Ambas opciones son buenas para validar números de teléfono, pero yo prefiero utilizar la API de Lookup, ya que en este punto probablemente realizarás una solicitud a la API para iniciar la verificación del teléfono y almacenar el usuario en tu base de datos.

Prácticas recomendadas para la seguridad de la cuenta

Validar un número de teléfono es solo una manera de ayudar a prevenir el fraude y garantizar que estás protegiendo tu aplicación y los datos de tus usuarios.

Siempre recomiendo la verificación de teléfono: puedes hacerlo de varias maneras, pero enviar un código de acceso único (OTP) al número de teléfono es una gran manera de garantizar la posesión de la cuenta la primera vez que un usuario proporciona esta información. Esto ayuda a proteger contra errores tipográficos simples y situaciones en las que un usuario ingresa un número que no posee. Obtén más información acerca de la implementación de OTP con la API de Twilio Verify.

También podría interesarte:

Estoy ansiosa por ver lo que eres capaz de crear y proteger.

Publicaciones relacionadas

Recursos relacionados

Twilio Docs

Desde API hasta SDK y aplicaciones de muestra

Documentación de referencia de API, SDK, bibliotecas auxiliares, inicios rápidos y tutoriales para su idioma y plataforma.

Centro de Recursos

Los últimos libros electrónicos, informes de la industria y seminarios web

Aprenda de los expertos en participación del cliente para mejorar su propia comunicación.

Ahoy

Centro de la comunidad de desarrolladores de Twilio

Mejores prácticas, ejemplos de códigos e inspiración para crear comunicaciones y experiencias de participación digital.