Trabajar con números de teléfono en el código JavaScript

Uno de los principales problemas que enfrentan los desarrolladores en su desarrollo temprano es cómo tomar datos de un usuario y luego validar esos datos. Si está tomando una entrada como un nombre o número de registro de un usuario, entonces puede validar fácilmente esos datos, sin embargo, se vuelve un poco complejo cuando toma la entrada como un número de teléfono.

En esta publicación, pasaremos por cómo tomar un número de teléfono como entrada de un usuario y luego validarlo de acuerdo con nuestras necesidades en esta publicación utilizando la etiqueta de entrada HTML5 con el tipo de tel nosotros mismos usando JavaScript.

Uso de la etiqueta de entrada HTML5 con TEL Tipo

Podemos usar la etiqueta de entrada HTML5 para tomar la entrada del usuario y podemos dar el tipo de Tel En la etiqueta de entrada para decirle al navegador que este cuadro de entrada debe tomar un número de teléfono. El tipo de tel de entrada HTML5 tiene algunas ventajas, son una de las que podemos establecer el requerido Atributo en la etiqueta de entrada que le dice al navegador que el usuario no puede continuar sin ingresar el número de teléfono y el otro es que podemos establecer un atributo de patrón. Probemos la etiqueta de entrada en HTML:

En el código anterior podemos ver que hemos dado una expresión regular como patrón a la etiqueta de entrada y, por lo tanto, usar esto validará el número de teléfono. Veamos un programa HTML adecuado:

Ejemplo: 123-456-7890

Entregar

En el código anterior, inicializamos la etiqueta de la etiqueta que muestra un ejemplo del número de teléfono que acepta la siguiente etiqueta de entrada donde hemos definido un patrón. Ahora la etiqueta de entrada en sí será responsable de validar la entrada tomada del usuario. Después de esto, definimos un botón y le dimos el tipo de botón. Siempre que un usuario haga clic en el entregar botón generará una respuesta basada en la acción de la etiqueta de formulario. Algunos de los ejemplos están a continuación:

Si hacemos clic en el botón Enviar, dejando el cuadro de entrada del número de teléfono en blanco:

Si damos un patrón incorrecto y hacemos clic en el botón Enviar, veremos la siguiente advertencia:

Uso de JavaScript para validar el número de teléfono

También podemos validar el número de teléfono con JavaScript. Para esto primero crearemos una etiqueta de entrada y un botón en HTML de la siguiente manera:

Ejemplo: 123-456-7890

Entregar

Utilizamos el evento OnClick en el elemento del botón, lo que significa que cada vez que un usuario hace clic en el botón Enviar, la función handleclick () comenzará a ejecutar. Esta función handleclick () se inicializará en un archivo separado código.js al que hicimos referencia usando el guion Etiqueta vista en el código anterior.

Vamos a trabajar ahora en la parte de JavaScript:

// función para manejar hacer clic en el botón Enviar
const handLecLick = () =>
// Obtener la referencia de la entrada de myphone
entrada var = documento.getElementById ("myphone").valor;
// Formato para el número de teléfono
formato var = /^\ (?([0-9] 3) \)?[-]?([0-9] 3) [-]?([0-9] 4) $/;
// declaraciones condicionales
if (input === ")
alerta ("Ingrese el número de teléfono")

más si (entrada.Match (format))
alerta ("Número de teléfono:"+ entrada);

demás
alerta ("escriba usando formato correcto");

En el código anterior, primero, inicializamos la función handleclick () y luego hacemos referencia al valor de la etiqueta de entrada. Después de eso, definimos el formato del número de teléfono que queremos usar expresiones regulares. Un ejemplo de número de teléfono aceptado, en este caso, sería 123-456-7890. A continuación, usamos las declaraciones condicionales y verificamos que si la entrada está vacía, entonces alerta Ingrese el número de teléfono de lo contrario, si la entrada coincide con el formato, alerta ese número de otro modo alerta que el número que el usuario tiene tipos está en el formato incorrecto. Veamos la salida uno por uno:

Primero, haremos clic en el botón Enviar mientras dejamos el cuadro de entrada en blanco:

A continuación, escribiremos un número de formato incorrecto, luego veremos la siguiente salida:

Al final, vamos para el formato correcto y vemos la salida:

Conclusión

Validar los números de teléfono en JavaScript puede convertirse en un dolor de cabeza para un nuevo desarrollador. Hay dos métodos que podemos usar para validar los números de teléfono. Primero, tomar la entrada de un usuario con la ayuda de una etiqueta de entrada HTML. A continuación para validar el número de teléfono, le damos a la etiqueta de entrada el tipo de Tel y un patrón al que debe validar. El segundo método es hacer un programa JavaScript personalizado que validará su número de teléfono de acuerdo con un formato dado como una expresión regular.

En esta publicación, aprendimos cómo tomar un número de teléfono como una entrada de un usuario y luego validamos ese número de teléfono utilizando dos métodos; Etiqueta de entrada HTML5 con TEL Tipo y lógica de JavaScript personalizada.