Los hombres de Paco
ProgramaciónEventos y cálculos
Desde la comisaría de San Antonio nos llegó un reto del inspector Paco Miranda. Por lo visto, a él “y a sus hombres” los habían destinado a hacer NIFs y NIEs y lo del cálculo de la letra les traía un poco de cabeza. Aquí podéis ver con todo detalle el reto.
Enunciado del reto:
El reto decía:
¡Hola, Ada y Edu!
Soy Paco Miranda, inspector jefe en la Comisaría de San Antonio.
Estamos implementando una funcionalidad en nuestra aplicación de creación de NIFs y NIEs y necesitamos una calculadora de la letra de control. Pero es importante que entendáis la diferencia entre un NIF y un NIE.
– Los NIFs están formados por 8 dígitos y una letra de control.
– Los NIEs están formados por una letra (X, Y o Z), 7 dígitos y una letra de control. Estas letras iniciales equivalen a 0, 1 o 2 respectivamente de cara a hacer los cálculos.
Te facilito un enlace donde se explica cómo calcular ese dígito de control.
Necesitamos un formulario con dos campos: en el primero se introduce los dígitos del NIF o NIE y en el segundo debería aparecer automáticamente la letra correspondiente. ¿Nos echáis una mano?
En este caso os presento una única solución:
- En primer lugar hay que tener en cuenta que restringimos el campo donde introduciremos el NIF o NIE todo lo posible utilizando HTML5 e incluyendo un pattern.
- Asignamos un evento de tipo keyup para comprobar, en cada pulsación, si ya están introducidos todos los dígitos esperados.
- A continuación comprobamos si se trata de un NIF, un NIE o es un dato erróneo, y procedemos a hacer los cálculos correspondientes.
- Por último mostramos la letra en el segundo campo de texto.
Como siempre, ya sabéis, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!
¿Qué aprenderás en el vídeo?
En este vídeo veremos:
- Cómo escribir una expresión regular completa que admita un NIF o un NIE.
- Cómo asociar un evento de tipo keyup a un elemento HTML.
- Cómo utilizar checkValidity para comprobar la validez de un campo de texto.
- Cómo extraer caracteres a partir de posiciones de una cadena y sustituirlos utilizando replace.
- Cómo realizar el cálculo utilizando la función módulo.
- Cómo escribir el valor resultante en un campo de tipo texto.
Vídeo y código fuente
¡¿A qué esperas?! ¡Echa un ojo al vídeo de la solución !
Y por supuesto, cómo no:
Código fuente de la solución
¿Tú cómo lo habrías hecho? ¡Espero tus propuestas 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…
Creo que el código de ejemplo tanto el html como el js es el de Julio César, jeje
Me encantó el vídeo. Eso de resolverlo mediante cadena de texto está genial. Se me hace más cómodo que con un array. Lo de las expresiones regulares es lo que más me cuesta. Pero al menos por fin me funcionó el click en el botón, jejeje. Ya es un avance, ¿no? 😉
¡Pues tienes razón! Es lo que tiene el copy-paste 😉
¡Ahora ya está el código bueno! ¡Gracias por avisar, Federico!
¡Sí, ¿verdad?! Con cadena de texto te lías menos, sobre todo cuando hay muchas letras (no tienes que andar con comillas)…
Las expresiones regulares son mucho más fáciles de lo que parece, ¡tengo que hacer una serie solo de eso! 🙂
Y como bien dices, ¡todos los avances son buenos! ¡Me alegro mucho de que vayan saliendote las cosas, Federico!