Establecer validación de longitud en HTML

1. Utilice el atributo pattern para establecer la validación de longitud en HTML
2. Utilice el atributo minlength para establecer la validación de longitud mínima en HTML

El artículo presentará dos métodos para establecer la validación de longitud en formularios HTML. Además, discutiremos la validación de longitud mínima y máxima.

Utilice el atributo pattern para establecer la validación de longitud en HTML

El atributo pattern define una expresión regular en la etiqueta input en HTML. Verificará el valor de entrada en el formulario y realizará la validación.

Podemos especificar la expresión regular como el valor del atributo pattern. Podemos usar el atributo pattern con los tipos de entrada como texto, correo electrónico, contraseña, teléfono, URL, fecha y búsqueda.

También podemos utilizar el atributo title en la etiqueta input para comprender la regla de validación. Podemos especificar el patrón de expresiones regulares para la longitud mínima y máxima.

Por ejemplo, cree un formulario y escriba una etiqueta input con la contraseña type dentro.

A continuación, utilice el atributo pattern para escribir el patrón de expresiones regulares .{8,}. Luego, escriba el texto mínimo ocho caracteres necesarios en el atributo title.

Por último, escriba el atributo required en la etiqueta y cree un botón de envío.

Aquí, hemos creado una expresión regular donde la longitud mínima de la entrada es ocho. Cuando intentamos enviar el formulario con una longitud de menos de ocho caracteres, el formulario no se enviará.

El mensaje en el atributo title se mostrará en tal condición. El . en la expresión regular denota cualquier carácter excepto la nueva línea. Podemos agregar otro número después de la coma para establecer la longitud máxima.

El atributo required evitará que se envíe el formulario cuando no se proporcione ningún valor. Por lo tanto, podemos establecer la validación de longitud en HTML utilizando el atributo pattern.

Código de ejemplo:

<form action="#">
    Password<input type="password" pattern=".{8,}" title="minimum eight characters needed" required>
    <input type="submit">
</form>

Utilice el atributo minlength para establecer la validación de longitud mínima en HTML

HTML proporciona un atributo llamado minlength para establecer la validación de longitud mínima en el campo input. Funciona en todos los tipos de entrada, al igual que el atributo pattern.

Por ejemplo, cree un formulario y luego un campo de entrada para una contraseña. Luego, escriba el atributo minlength en la etiqueta input, establezca el valor del atributo como 8, y finalmente, cree un botón de envío.

Aquí, la validación de longitud funciona igual que en el primer método. Cuando ingresamos un valor de menos de ocho caracteres, no se enviará el formulario.

También podemos usar la propiedad maxlength para establecer la longitud máxima. Por lo tanto, podemos usar el atributo minlength para establecer la validación de longitud mínima en HTML.

Código de ejemplo:

<form action="#">
    Password
    <input type="password" minlength="8">
    <input type="submit">
</form>