Stranger Things
ProgramaciónValidar una contraseña con Javascript
La semana pasada recibíamos el reto para ponérselo difícil a los personajes de Stranger Things, cuyo título era “Dustin, Suzie y la constante de Planck“.
Enunciado del reto
El reto decía así:
Señorita Ada:
Necesitamos que cree un formulario que compruebe si se ha introducido correctamente la constante de Planck.
* Que, por cierto, es 6.62607015, aunque Suzie menciona una versión anterior 6,62607004.
En esta ocasión, y basándonos en el reto de la semana anterior (Berlín, Tokio y Moscú también son capitales), he diseñado dos soluciones:
- Una sencilla, que comprueba simplemente que la contraseña cumple con alguno de los dos valores de la constante de Planck.
- Una un poco más compleja y que se lo pone chupao a los que tienen que introducirla: además de comprobar los valores validamos el formulario HTML.
Pero recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!
¿Qué aprenderás en los vídeos?
Así que en estos dos vídeos os explico:
- Cómo asignar un evento a un objeto (en este caso, al botón enviar) para que se ejecute una función cuando hacemos click sobre él.
- Cómo llamar a a función con nombre y a una función anónima asociadas a un evento.
- Cómo evitar el envío de un formulario.
- Cómo comprobar que un valor se corresponde con uno de entre cuatro.
- Cómo crear un patrón para un decimal como la constante de Planck.
- Cómo realizar una validación de campo no vacío y patrón.
- Cómo utilizar el selector :valid e :invalid de CSS para asignar un estilo a un campo que cumple con las restricciones… o no.
- Cómo usar validity y no morir en el intento.
- Cómo modularizar el código con tres funciones.
Vídeos y código fuente
¡Basta de rollos! ¡Echa un ojo a los vídeos!
Código fuente de la solución (1/2)
[/not_logged_in]
Código fuente de la solución (2/2)
[/not_logged_in]
¿Tú cómo lo habrías hecho? ¡Deja tus ideas en los comentarios!
Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…