Cómo escribir una expresión regular para una contraseña en un formulario HTML

1. Cómo escribir la expresión regular de una contraseña para un input en HTML
   1. Condiciones del pattern del input password
2. Escribiendo la expresión regular para la contraseña
   1. Explicación de las partes de la expresión regulada

Cómo escribir la expresión regular de una contraseña para un input en HTML

Las expresiones regulares son herramientas poderosas que se utilizan para validar y manipular cadenas de texto.

En HTML, uno de los principales usos de las expresiones regulares es el de indicar al navegador las condiciones que debe tener un input para ser validado, normalmente para validar e-mails y contraseñas seguras. Para hacerlo, se puede escribir el atributo pattern seguido de la expresión regular.

Condiciones del pattern del input password

En este artículo vamos a escribir una expresión regular de ejemplo que valide un input de contraseña con las siguientes condiciones:

• La contraseña debe tener más de 10 caracteres.
• Debe tener como mínimo un carácter en mayúsculas.
• Debe tener como mínimo un carácter numérico.
• Debe tener como mínimo un carácter especial.

Escribiendo la expresión regular para la contraseña

La expresión regular para validar esta contraseña sería la siguiente:

^(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).{10,}$

En el código HTML se escribe así:

<input type="password" pattern="^(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).{10,}$">

Explicación de las partes de la expresión regulada

Ahora, una explicación detallada de cada parte de la expresión regular:

1. ^ : este símbolo indica el inicio de la cadena de la expresión regular.
2. (?=.*[A-Z]) : la primera parte de la expresión regular busca al menos un carácter en mayúscula. La expresión regular, "?=" es una construcción llamada "positive lookahead" o "búsqueda hacia adelante positiva" que busca caracteres inmediatamente después del texto que haya delante de "?=" (en este caso, ningún texto porque busca la coincidencia en toda la expresión, no solo a partir de un determinado caracter, en cambio si fuese "Hola(?=.*[A-Z])" buscaría al menos un caracter en mayúsculas después del texto "Hola"). El .* significa que ningún o algún caracter puede aparecer antes de la mayúscula, es decir, el caracter o caracteres en mayúsculas pueden estar en cualquier posición. El [A-Z] significa que la mayúscula debe estar entre las letras A y Z.
3. (?=.*\d) : este es otro grupo de búsqueda positiva que busca al menos un carácter numérico. El \d significa que debe haber un dígito.
4. (?=.*[^\w\s]) : este es otro grupo de búsqueda positiva que busca al menos un carácter especial. El [^\w\s] significa que debe haber cualquier carácter que no sea un caracter alfanumérico o un espacio en blanco. En un grupo de búsqueda, la presencia de "^" significa que no debe aparecer nada de lo que está en el grupo y, aquí, "\w" representa todos los caracteres alfabético y "\s" representa un espacio en blanco.
5. . : un punto representa cualquier carácter (excepto el salto de línea)
6. {10,} : este indica que debe haber al menos 10 caracteres en la cadena. El primer número indica el número de caracteres mínimo, después hay una coma y, si, hay otro número tras la coma es el número máximo de caracteres permitidos.
7. $ : el símbolo del dólar indica el final de la cadena.

Las expresiones regulares pueden parecer complicadas al principio, pero son una herramienta poderosa y versátil para validar y manipular cadenas de texto. Con este ejemplo, esperamos haber demostrado cómo se puede escribir una expresión regular para validar una contraseña.

Hay muchas más expresiones, símbolos, construcciones etcétera que se irán explicando en otros artículos de esta página web.