Número de teléfono Regex en JavaScript

Al verificar un formulario HTML, es fundamental validar el número de teléfono. Dependiendo de la región, un número de teléfono válido podría tener varios formatos. Existen reglas generales, como limitar el número de dígitos o mantener el número solo de valores numéricos. Sin embargo, en algunas situaciones, un número de teléfono puede tener un formato que incluye caracteres especiales como un signo más, tablero y paréntesis, o puede tener un formato completamente diferente a otros países o regiones.

Este estudio explicará el Regex para validar el número de teléfono en JavaScript.

Número de teléfono Regex en JavaScript

Las expresiones regulares son el método más simple para validar los números de teléfono en JavaScript. Sin embargo, dependiendo de las preferencias del usuario, los números de teléfono se pueden formatear de varias maneras. Aquí hay algunas expresiones regulares para la validación del número de teléfono.

Ejemplo 1: Validación básica de número de teléfono regex
Aquí, los patrones regex otorgados a continuación o las expresiones regulares solo permiten números de teléfono con 10 dígitos. No se permiten caracteres especiales, incluidos espacios,.

Patrón regex
Siga el patrón regex dado para la validación básica del número de teléfono:

/^\ d 10 $/

O

/^\ d 3 \ d 3 \ d 4 $/

Aquí hay un desglose de todos los elementos para ayudar a los lectores a comprender lo que contiene.

• "^"Denota el inicio de la cadena
• "/"Se utiliza el carácter de barra delantera para indicar los límites de la expresión regular
• "d"Significa dígitos
• ""Indica el límite
• "\"El personaje de Back -staglash es el personaje de escape
• "ps"Denota el final de la cadena

Use cualquiera de los reglas anteriores para el número de teléfono de validación sin ningún carácter especial o un delimitador.

En el archivo HTML, cree un formulario utilizando el siguiente código:

Teléfono básico regex sin delimitador

Teléfono #:

Por favor ingrese un número de teléfono válido

Entregar

En el fragmento de código anterior,

• Primero, cree un formulario con la identificación "forma".
• Luego cree un campo de texto de entrada para el valor de entrada y asigne una ID "número".
• Un párrafo usando

  etiqueta que mostrará un error cuando el valor de entrada no es válido.

• Cree un botón de envío con la identificación "entregar".

Las siguientes clases de CSS se utilizan para el mensaje de error:

.error

color rojo;

.machista

Pantalla: ninguno;

El formulario HTML se verá como:

En el archivo JavaScript, use las siguientes líneas de código:

función validatePhonEnumber (e)
var pnumber = documento.getElementById ('número').valor;
si (!fonerEgex (pnumber))
documento.getElementById ('Error').Lista de clase.agregar ('msg');
alerta ("enviado");

demás
documento.getElementById ('Error').Lista de clase.eliminar ('msg');

mi.prevenDefault ();

En este fragmento de código:

• Defina una función "validatePhonEnumber ()".
• Obtenga el valor del campo de entrada usando la ID "número"Con la ayuda del"getElementById ()"Método y guárdelo en una variable"number".
• Llamar a la función "Phoneregex ()"Al pasar el número de entrada"number"Como argumento, y verifique si el número de entrada es igual al regex.
  • En caso afirmativo! Luego muestra una alerta con el mensaje "enviado"Y agrega la clase"machista" utilizando el "Lista de clase.agregar()"Método que no muestra ninguno.
  • Si la condición no es cierta, muestre el error llamando al "Lista de clase.eliminar()"Método, que mostrará un error.

Después de eso, defina una función llamada "Phoneregex ()"Donde se definirá el patrón regex para el número de teléfono de validación:

function PhoneGex (input_str)
var regpattern = /^\ d 3 \ d 3 \ d 4 $ /;
REVISIÓN DE RETROBACIÓN.test (input_str);

Por último, llame a la función "validatePhonEnumber ()"En el envío usando la identificación del botón"entregar"Con la ayuda del"addEventListener ()" método:

documento.getElementById ('formulario').addEventListener ('enviar', validatePhonEnumber);

Producción

La salida anterior significa que el patrón regex para solo números de teléfono con 10 dígitos y sin ningún carácter especial o delimitador funciona con éxito.

Ejemplo 2: Validación compleja de número de teléfono regex
Los patrones regex o expresiones regulares de la siguiente ojal permiten números de teléfono con 10 dígitos y caracteres especiales que incluyen signo más, tablero y paréntesis.

Patrón regex para validar los números de teléfono con Delimiter Dash (-)
El Regex para validar los números de teléfono con 10 dígitos y un tablero de caracteres especial (-):

/^\ d 3 [-] \ d 3 [-] \ d 4) $/

El patrón muestra:

• "^"Denota el inicio de la cadena
• "/"Se utiliza el carácter de barra delantera para indicar los límites de la expresión regular
• "d"Significa dígitos
• ""Indica el límite
• "[-]"Indica un personaje especial permitido
• "\"El personaje de Back -staglash es el personaje de escape
• "ps"Denota el final de la cadena

Agregue el patrón regex anterior en el "Phoneregex ()"Función definida:

function PhoneGex (input_str)
var regPattern = /^\ d 3 [-] \ d 3 [-] \ d 4) $ /
REVISIÓN DE RETROBACIÓN.test (input_str);

La salida correspondiente será:

Patrón regex para validar números de teléfono con delimitadores, incluidos Dash (-) y Brazes ()
El Regex para validar los números de teléfono con 10 dígitos y aparatos de características especiales () y Dash (-):

/^\ (?(\ D 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/

El patrón muestra:

• "^"Denota el inicio de la cadena
• "/"Se utiliza el carácter de barra delantera para indicar los límites de la expresión regular
• "d"Significa dígitos
• ""Indica el límite
• "[-]"Indica un personaje especial permitido
• "(?"También denota según lo permitido en la entrada
• "\"El personaje de Back -staglash es el personaje de escape
• "ps"Denota el final de la cadena

Agregue la expresión regular anterior en el "Phoneregex ()"Función definida:

function PhoneGex (input_str)
VAR RECPATTERN = /^\ (?(\ D 3) \)?[-]?(\ d 3) [-]?(\ D 4) $/;
REVISIÓN DE RETROBACIÓN.test (input_str);

Producción

La salida anterior acepta los caracteres especiales o delimitadores en la entrada, incluidos los aparatos ortopédicos y los guiones con el número de teléfono de 10 dígitos. Muestra un error mientras el signo (+) se usa en la entrada.

Patrón regex para validar números de teléfono con todos los delimitadores, incluidos Dash (-), Brackets (), Dot (.), Espacios y (+) signo
El Regex para validar los números de teléfono con 10 dígitos y características especiales (), Dash (-), Dot (.), el signo más (+) y el espacio:

/^[\+]?[(]?[0-9] 3 [)]?[-\s\.]?[0-9] 3 [-\ s \.]?[0-9] 4 $/

El patrón muestra:

• "^"Denota el inicio de la cadena
• "/"Se utiliza el carácter de barra delantera para indicar los límites de la expresión regular
• "d"Significa dígitos
• ""Indica el límite
• "[-]"Indica un personaje especial permitido
• "[(]?"También denota según lo permitido en la entrada
• "\s"Denota un espacio
• "\."Indica el punto
• "\"El personaje de Back -staglash es el personaje de escape
• "ps"Denota el final de la cadena

Use el patrón anterior en el "Phoneregex ()"Función definida:

function PhoneGex (input_str)
Var Regattern = /^[\+]?[(]?[0-9] 3 [)]?[-\s\.]?[0-9] 3 [-\ s \.]?[0-9] 4 $/;
REVISIÓN DE RETROBACIÓN.test (input_str);

Producción

Hemos compilado todos los posibles patrones regex o expresiones regulares para validar números de teléfono.

Conclusión

El uso de expresiones regulares en JavaScript es la forma más simple de validar los números de teléfono. Hay muchas verificaciones que el desarrollador puede aplicar en el número de teléfono con la ayuda de Regex. Las verificaciones pueden ser solo números o números con caracteres especiales o delimitadores, incluidos guiones, aparatos ortopédicos, puntos, espacios y el signo más. Este estudio explica diferentes reglas que pueden validar el número de teléfono en JavaScript.