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…
