Validar números de teléfono en JavaScript con expresiones regulares

Introducción

Ya sea que se dé cuenta o no, los datos se han convertido en una parte crucial de nuestra vida cotidiana. Desde pedir comida en línea hasta buscar comida para gatos, enviamos y recibimos datos constantemente. Como desarrolladores de aplicaciones web, es nuestra responsabilidad asegurarnos de que las entradas de los usuarios estén en el formato especificado para que la base de datos comprenda los datos correctamente y la aplicación siga siendo sólida.

La validación del número de teléfono es importante porque garantiza que los datos se guarden en un formato coherente en toda la base de datos. Por ejemplo, los usuarios pueden necesitar una aclaración sobre si deben ingresar el código de país antes de su número de teléfono. Con la validación adecuada, los usuarios pueden determinar fácilmente si es necesario. De manera similar, la experiencia del usuario mejora con un formato coherente, ya que sabe qué esperar de los usuarios y puede implementar la lógica en consecuencia. Sería una mala experiencia para los usuarios si el código se rompe en una etapa posterior debido a datos inconsistentes.

Las expresiones regulares son herramientas poderosas para la coincidencia de patrones. Brindan la flexibilidad para hacer coincidir patrones de varios tipos, según su caso de uso. Además, las expresiones regulares son independientes del idioma, lo que hace que su lógica de validación sea más portátil, ya que puede integrar fácilmente la validación principal. Trabajar con expresiones regulares en JavaScript es una tarea sencilla.

Este artículo lo ayudará a comprender cómo usar el poder de las expresiones regulares para validar números de teléfono para su aplicación. Escribirá una función de JavaScript simple para validar números de teléfono con códigos de países.

¿Qué es una expresión regular?

En términos simples, una expresión regular coincide con un patrón predefinido en una cadena determinada. Se usa ampliamente en lenguajes de programación y se emplea principalmente para validar entradas de un formato específico. Además, las expresiones regulares se usan comúnmente para buscar, dividir y sustituir patrones específicos.

Supongamos que desea encontrar una dirección de correo electrónico en un documento. La dirección de correo electrónico puede ser cualquier dirección, no una específica. Escribir una expresión simple te ayudará a encontrar el patrón rápidamente, dado que ya conoces la estructura de una dirección de correo electrónico.

Una expresión regular usa caracteres especiales para indicar diferentes tipos de patrones. Por ejemplo:

• . (punto) es un carácter especial que puede coincidir con cualquier carácter.
• * (asterisco) coincide con el carácter anterior 0 o más veces.
• + (más) coincide con el carácter anterior una o más veces.
• ? (signo de interrogación) hace que el carácter anterior sea opcional.
• [abc] coincide con cualquiera de los personajes a, bo c.
• (abc) agrupa a los personajes.
• ^ (intercalación) coincide con el inicio de la línea.
• $ (dólar) coincide con el final de la línea.

Estos son sólo unos pocos. Si desea profundizar más y conocer más patrones, puede consultar este documento de Microsoft.

Construyamos una expresión regular que verifique si un conjunto dado de números es un código postal de cinco dígitos. Para comenzar a escribir la expresión, usaremos el ^ (signo de intercalación), ya que coincide con el inicio de la línea. En una expresión regular, d coincide con cualquier dígito y un número entre llaves ({}) coincide con el elemento anterior exactamente el número de veces dado dentro de las llaves. De la lista anterior, sabemos que $ se utiliza para hacer coincidir el final de la línea.

Combinando esta información, obtenemos una expresión regular como esta:

/^d{5}$/

Ahora, examinemos el siguiente gráfico para comprender mejor la expresión.

Expresión regular para hacer coincidir el código postal de cinco dígitos

Ahora que tenemos una comprensión básica de las expresiones regulares y su construcción general, es un buen momento para explorar cómo se pueden implementar estas expresiones en una función de JavaScript.

Expresiones regulares de JavaScript

JavaScript es el lenguaje de programación más popular entre los desarrolladores. Dado que casi todas las aplicaciones web requieren JavaScript, es crucial comprender cómo se pueden usar las expresiones regulares en este lenguaje.

En JavaScript, el RegExp El objeto se utiliza para la coincidencia de patrones. Este objeto se puede utilizar de dos maneras:

• Usando notación literal, donde un patrón se formatea entre dos barras diagonales
• Usando la notación constructora, donde una cadena o un RegExp se pasa el objeto

La notación literal se puede usar de la siguiente manera:

const expr = /^d{5}$/i;

Por otro lado, con la notación de constructor, deberá usar el RegExp constructor para crear una instancia de él. Así es como se ve:

const expr = new RegExp(/^d{5}$/, "i");

Puede leer más sobre el objeto RegExp en el documentos oficiales de MDN. Ahora, exploremos la importancia de la validación del número de teléfono y los diversos componentes de un número de teléfono.

Validación de número de teléfono y componentes

La validación de números de teléfono en el lado del cliente es crucial al guardar números de teléfono en su base de datos. Sin la validación adecuada, su código podría presentar comportamientos inesperados.

Por ejemplo, suponga que está utilizando un servicio que requiere el código de país junto con el número de teléfono, pero sus usuarios no los incluyen debido a la falta de validación. Ahora solo tienes el número sin el código de país, y un servicio que envía mensajes de texto SMS podría fallar debido a esto. Este es solo un escenario hipotético. Otros problemas pueden incluso bloquear su aplicación. Es crucial manejar adecuadamente sus datos en la interfaz, asegurándose de guardar datos limpios y consistentes en su base de datos.

Generalmente, un número de teléfono consta de cuatro partes:

• Código de país: Los primeros 1 a 3 dígitos (según el país) definen el país del número de teléfono. Este código permite enrutar la llamada al país correcto. Un código de país no puede comenzar con un 0.

El artículo que está editando actualmente se titula "Validar números de teléfono en JavaScript con expresiones regulares". El trozo de texto a editar:

• Código de área: también conocido como ciudad o código de marcación, esta parte del número ayuda a enrutar la llamada al área geográfica correcta dentro del país. En algunos países, como Estados Unidos, los códigos de área también pueden indicar un conjunto específico de números de teléfono para un servicio en particular. Además, en América del Norte, un código de área no puede comenzar con 0 o 1.
• Prefijo telefónico: la compañía telefónica asigna esta secuencia de números a una oficina central o central telefónica específica, lo que reduce aún más el área geográfica específica o el vecindario.
• Número de línea: Este es el número único asignado a la línea telefónica específica para un hogar o negocio dentro del área de prefijo. Esta parte del número generalmente garantiza que cada número de teléfono dentro de un país, área y prefijo sea único.

Excluyendo el código de país, la combinación de las partes restantes da como resultado un número de teléfono de diez dígitos donde el código de área y el prefijo telefónico tienen tres dígitos cada uno, y el número de línea tiene cuatro dígitos.

Pasemos ahora a escribir una función de JavaScript que valide un número de teléfono según estos criterios mediante expresiones regulares.

Crear un RegEx para la validación del número de teléfono

Ya hemos entendido la estructura básica de un número de teléfono. También hemos aprendido acerca de las expresiones regulares y cómo se pueden usar en JavaScript. En esta sección, escribiremos una función de JavaScript simple que valida los números de teléfono del formato dado:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Por ejemplo, un número de teléfono válido para nuestra función será así +123-456-789-1234, Pero no +012-123-456-7890 or +12-123-456-789, ya que estos números de teléfono no siguen las reglas de los números de teléfono que discutimos anteriormente.

Ahora, pasemos a escribir la expresión regular. Primero, verifiquemos si el código de país tiene de 1 a 3 dígitos y no comienza con cero.

Para indicar el inicio de la expresión regular, use un signo de intercalación (^), luego valide que exista un plus al principio. Para este propósito, usemos +, que coincidirá con que el plus existe al principio. Ahora, para asegurarnos de que los dígitos del código de país estén entre uno y tres dígitos y que el primer dígito no sea cero, podemos escribir algo como esto: [1-9]{1}[0-9]{0,2}. Aquí, [1-9]{1} especifica que cualquier dígito del 1 al 9 puede existir exactamente una vez, y de manera similar, [0-9]{0,2} indica que cualquier dígito del 0 al 9 puede existir de cero a dos veces.

Para el separador, podemos agregar un - (guión) entre las secciones del número. Uno - se puede agregar después de la validación del código de país. Entonces, en este punto, la expresión regular se ve así:

^+[1-9]{1}[0-9]{0,2}-$

La $ al final especifica el final de la línea. Ahora, para el código de área, esto será bastante similar. Un código de área no puede comenzar con un cero o un uno. Entonces, la primera parte será [2-9]{1}. Esto coincide con que el primer número está entre 2 y 9. Esta coincidencia ocurre una vez. Entonces, para el resto del código, podemos escribir [0-9]{2}. Esto asegurará que haya exactamente dos dígitos después del primero, y para cada dígito, el rango está entre 0 y 9. Nuevamente, agregue el guión separador al final.

Ahora, la expresión regular completa se verá así:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

Usemos nuevamente el mismo patrón para verificar el prefijo telefónico. Supongamos que el prefijo telefónico tampoco puede comenzar con un cero o un uno. Entonces, agregando [2-9]{1}[0-9]{2} y un guión nuevamente hará que la expresión sea así:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

La única parte que queda ahora es el número de línea, que puede ser cualquier dígito con una longitud de exactamente cuatro. Este es más sencillo que los otros. la expresión es [0-9]{4}.

La expresión completa es la siguiente:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

Debes haber notado el uso frecuente de llaves. Se utilizan para hacer coincidir las instancias proporcionadas dentro de la llave. Si es un dígito específico, como {1}, coincidirá con el patrón anterior exactamente una vez. Sin embargo, si es un rango, como {0, 2}, define el número mínimo y máximo de coincidencias. Entonces, en el caso de {0, 2}, coincidirá con el patrón un mínimo de cero veces y un máximo de dos veces.

El patrón está listo. Ahora podemos escribir una función de JavaScript simple para verificar si un número de teléfono es válido usando la expresión regular. Aquí está la función:

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234"); 

La función es bastante sencilla. Toma un número de teléfono como entrada. El patrón de expresión regular se almacena dentro de una variable llamada pattern. Se crea una instancia del patrón utilizando el constructor RegExp y pasando la expresión como un parámetro al constructor. Luego, probamos el número de teléfono usando el test método disponible en el objeto. Usando una declaración if-else, verificamos si el número de teléfono pasa la prueba. Si es así, devolvemos verdadero y enviamos un mensaje de consola que indica que el Phone number is valid. De lo contrario, devuelve falso y muestra un mensaje de consola que indica que el número de teléfono no es válido.

Con esto, estamos listos para irnos. Ahora, puede probar sus números de teléfono para ver si son válidos.

Resumen

Este artículo tuvo como objetivo proporcionar una breve descripción general de las expresiones regulares, sus usos y cómo se pueden aplicar para validar números de teléfono. También discutimos los diversos componentes de un número de teléfono y cómo se puede probar cada componente.

Con una comprensión básica de las expresiones regulares, ahora puede explorar patrones adicionales. También puede utilizar herramientas como Regex101 para validar sus expresiones en línea.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• EVM Finanzas. Interfaz unificada para finanzas descentralizadas. Accede Aquí.
• Grupo de medios cuánticos. IR/PR amplificado. Accede Aquí.
• PlatoAiStream. Inteligencia de datos Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/