Los formularios son la mayor parte del documento HTML para recopilar datos e información del usuario. Para obtener la entrada correcta en el formulario de los usuarios, es necesario restringir a los usuarios que ingresen información no válida. Se requiere que los desarrolladores agregen algunas verificaciones de validación en los documentos HTML. Para este propósito, el usuario puede agregar validación en diferentes objetos del formulario, como la validación del número de teléfono a través del "patrón" atributo.

Esta publicación explicará cómo aplicar la validación del número de teléfono HTML5 con el patrón.

Cómo aplicar la validación del número de teléfono HTML5 con el patrón?

Para agregar la validación del número de teléfono con un patrón, siga las instrucciones dadas.

Paso 1: crear un contenedor "div"

Inicialmente, haga un contenedor "Div" utilizando el "Elemento "y asignar el"identificación" atributo.

Paso 2: Agregar encabezados

A continuación, agregue dos encabezados usando el "

" y "

"Etiquetas. El "

"La etiqueta se usa para incrustar el encabezado del nivel uno y"

"Especifica el encabezado del nivel dos.

Paso 3: Crear forma

A continuación, cree un formulario usando el ""Etiqueta junto con los siguientes elementos:

• Inserte un ""Etiqueta junto con el"para"Atributo para etiquetar el elemento. El atributo "para" relata el elemento específico con la etiqueta.
• ""El elemento se agrega después del"Etiqueta, que se refiere a un campo de entrada para insertar datos.
• El elemento "" se proporciona con atributos de "tipo" y "patrón".
• El "tipo"El atributo determina el tipo particular de entrada definida. Utilizar el "Tel"Valor para obtener el número de teléfono del usuario.
• El "patrón"Define el formato de los tipos de entrada establecidos, incluidos el correo electrónico, la fecha, el texto, la búsqueda, la URL, la Tel y la contraseña.
• Cree un botón usando "Tipo" como "botón"Y" valor "como"Ingresar":

Linuxhint Ltd UK

Validación del número de teléfono HTML5 con patrón

Formato de número de teléfono: xxx-xxx-xxxx


Número de teléfono:

Producción

Paso 4: Elemento de estilo "Div"

Para diseñar el "div"Elemento, primero acceda al elemento por ID"#validación”Y aplique las siguientes propiedades:

#validación
Text-Align: Center;
estilo fronterizo: cresta;
margen: 50px;
color de borde: RGB (85, 85, 245);
Color de fondo: RGB (243, 242, 160);

Aquí:

• "texto alineado"La propiedad se establece como"centro"Para alinear el texto en el centro.
• "estilo de borde"Se usa para determinar el estilo de borde. Por ejemplo, hemos aplicado el "cresta" estilo de borde.
• "margen"Asigna el espacio en el exterior del elemento.
• "color del borde"Utilizado para especificar el límite colorido alrededor del elemento definido.
• "color de fondo"Especifica el color de fondo del contenedor.

Producción

Hemos demostrado cómo aplicar la validación del número de teléfono HTML5 con el patrón.

Conclusión

Para aplicar el patrón de validación del número de teléfono HTML5, primero, cree un formulario utilizando el ""Etiqueta y agregue""Que etiqueta el campo de entrada. Después de eso, agregue el ""Elemento junto con el"tipo" como "Tel"Y atributos de" patrón ". El "patrón"El atributo especifica el patrón para la validación del número de teléfono. Esta publicación ha demostrado el procedimiento para agregar la validación del número de teléfono HTML5 con el patrón.