Autor Tema: Validar un DNI con JavaScript y formularios con expresiones regulares CU01185E  (Leído 32948 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola. Ejercicio CU01185E del curso JavaScript desde cero.

A partir del siguiente código:

Código: [Seleccionar]
<html>
    <head>
                <meta charset="utf-8">
                <style type="text/css">
                input {margin:10px;}
                </style>
        <script>
            function Valida(formulario) {
                /* Validación de campos NO VACÍOS */
                if ((formulario.campo1.value.length == 0) || (formulario.campo2.value.length ==0) || (formulario.cpostal.value.length ==0) || (formulario.dni.value.length ==0) || (formulario.email.value.length ==0)) {
                    alert('Falta información');
                    return false;
                }
                if (isNaN(parseInt(formulario.campo2.value))) {
                    alert('El campo2 debe ser un número');
                    return false;
                }
                /* validación del CÓDIGO POSTAL*/
                var ercp=/(^([0-9]{5,5})|^)$/;
                if (!(ercp.test(formulario.cpostal.value))) {
                    alert('Contenido del código postal no es un código postal válido');
                    return false; }
                /* validación del DNI */
                var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
                if (!(erdni.test(formulario.dni.value))) {
                    alert('Contenido del dni no es un DNI válido.');
                    return false;  }
                /* validación del e-mail */
                var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;       
                if (!(ercorreo.test(formulario.email.value))) {
                    alert('Contenido del email no es un correo electrónico válido.');
                    return false; }
                /* si no hemos detectado fallo devolvemos TRUE */
                return true;
            }
        </script>
    </head>
    <body>
        <form name="miFormulario" onsubmit="return Valida(this);" action="http://aprenderaprogramar.com" >
            Campo1 <input type="text" name="campo1"><br>
            Campo2 (debe ser número) <input type="text" name="campo2"><br>
            Código postal <input type="text" name="cpostal"><br>
            DNI <input type="text" name="dni"><br>
            email <input type="text" name="email"><br>
            <input type="submit" value="Enviar" name="enviar">
        </form>
    </body>
</html>

Citar
a) ¿Cómo se realiza la comprobación de que no hay campos vacíos?
Desde esta parte...
Código: [Seleccionar]
if ((formulario.campo1.value.length == 0) || (formulario.campo2.value.length ==0) || (formulario.cpostal.value.length ==0) ||
(formulario.dni.value.length ==0) || (formulario.email.value.length ==0)) {
                    alert('Falta información');
                    return false;
                }
Se comprueba el tamaño de la cadena de caracteres introducidos en cada campo, y si alguna es 0,  no será enviado el formulario.

Citar
b) ¿Cómo se realiza la comprobación de que el campo 2 es un número?
Con la función isNaN() se comprueba si los datos introducidos son un número válido.

Citar
c) ¿En qué consiste la validación del código postal? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.
La expresión regular usada es /(^([0-9]{5,5})|^)$/, que viene a decir que el campo debe de contener cinco caracteres numéricos que estén entre el 0 y el 9.
Ejemplos válidos serían: 12345, 45678, 05574.
Ejemplos no válidos serían cualquier número que contenga menos de 5 cifras o más de 5 cifras.

Citar
d) ¿En qué consiste la validación del DNI? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.

/(^([0-9]{8,8}\-[A-Z])|^)$/
El DNI debe de estar formado por 8 caracteres que estén entre el 0 y el 9, seguidos por un guión "-" y acabados con una letra mayúscula.
DNI no válidos: 12345-S, 12345Z, 004546-
DNI válidos: 00000000-S, 12345678-E, 45678915-Z

Citar
e) ¿En qué consiste la validación del email? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.
/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/
El email debe de empezar por una cadena de caracteres que no empiecen por @ o espacio en blanco, compuesta por 1 o mas caracteres. Seguida del simbolo @. Seguida de una cadena de caracteres que no empiecen por @, "." o espacio en blanco, compuesta por 1 o mas caracteres. Seguida de un ".". Seguida  de una cadena de caracteres que no empiecen por @, "." o espacio en blanco, compuesta por 1 o mas caracteres.
Emails no válidos: @@.com, pepe.com, popi@.com
Emails válidos: pepe@pepe.com, pepe@p.c, pepe@pepe.pepepe

Citar
f) ¿Cómo se consigue que no se envíe el formulario si no se cumplen los requisitos exigidos?
Los requisitos se van comprobando uno a uno, así que en cuanto uno de ellos no es válido se devuelve false al formulario.

Saludos.
« Última modificación: 09 de Febrero 2016, 08:59 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas Pedro todo correcto

Para quien tenga curiosidad, un DNI puede ser validado con JavaScript ya que la letra del DNI se obtiene con un algoritmo a partir de los números. Por ello puede validarse si se desea que el dni sea correcto (que la letra indicada se correspond a los números).

Código para validación:

Código: [Seleccionar]
function nif(dni) {
  var numero
  var letr
  var letra
  var expresion_regular_dni
 
  expresion_regular_dni = /^\d{8}[a-zA-Z]$/;
 
  if(expresion_regular_dni.test (dni) == true){
     numero = dni.substr(0,dni.length-1);
     letr = dni.substr(dni.length-1,1);
     numero = numero % 23;
     letra='TRWAGMYFPDXBNJZSQVHLCKET';
     letra=letra.substring(numero,numero+1);
    if (letra!=letr.toUpperCase()) {
       alert('Dni erroneo, la letra del NIF no se corresponde');
     }else{
       alert('Dni correcto');
     }
  }else{
     alert('Dni erroneo, formato no válido');
   }
}

Explicación:

Citar

1º La función recibe una variable con el DNI como string.

2º Tras definir las variables creamos una expresión regular que valida si el DNI está compuesto por 8 letras y un caracter, ya sea en mayúscula o minúscula.

3º Extraemos el número del DNI (es decir, un substring con la longitud del DNI entero menos una letra) y la letra (un substring de un solo caracter que empieza en la posición de la longitud total menos uno).

4º Hacemos la operación de módulo entre el número extraído y 23, reutilizando la variable número para almacenar el resultado. Hacemos esto porque lo necesitamos para calcular si la letra del NIF es válida.

5º Creamos una string con las letras del abecedario ( sin la ñ) en este orden específicamente: TRWAGMYFPDXBNJZSQVHLCKET

6º Cogemos un substring de un solo caracter de esa cadena de letras que empiece en la posición marcada por el número que conseguimos en el punto cuatro al hacer la operación de módulo, reutilizando la variable módulo.

7º Comprobamos que la letra cogida de la cadena de letras sea igual a la letra cogida del DNI. Si se cumple la condición sacamos un aviso de que es correcto y si no sacamos el de error.

El código tal cual es para introducir un dni con la letra pegada al número. Si se quiere admitir un guión entre los números y la letra habría que modificar la función.

Salu2

jsisl

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
function dniOK(){
    let expreg = /^[0-9]{8}$/
    if(expreg.test(dni.value)){
        var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
        let posicion = dni.value%23
        respuesta.textContent = dni.value + letras[posicion]
    } else {
        respuesta.textContent = "El numero no es valido."
    }
}

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".