10

El fichero JS de validación de fecha dd/mm/aaaa falla si pones como días 10 y 20.
El código es este:

function validaEdat(){
    vesSumant();
    vfalladata = false;

    //Comprovació de la data de naixement i el correu electrònic
    var vregexNaix = /^([012][1-9]|3[01])(\/)(0[1-9]|1[012])\2(\d{4})$/;


    vdataNaix = document.formu.dataNaix.value;
    vanyData = vdataNaix.substring(vdataNaix.length-4, 4);

    if((!vregexNaix.test(vdataNaix)) || (/^(\d{4})$/.test(vanyData))){
        alert("Bonvolu skribi naskighdato per tt/mm/jjjj. \n--------------------------------------\n Per favor, empleneu la data com dd/mm/aaaa.");
        document.formu.dataNaix.value = "";
        document.formu.dataNaix.focus();
        return false;
    }

    controlaCaselles();
    return true;
}
0

4 respuestas 4

22

Validar una fecha

Validar una fecha con una expresión regular, si bien es posible, es poco práctico y son muy pocos los casos en los que lo recomendaría. Para mí, el limitante es: ¿Entendés cada parte del regex? ¿Lo vas a entender fácilmente dentro de unos años? ¿Si otro desarrollador tendría que editar tu código, podría entenderlo fácilmente?

Existen muchas alternativas, más sencillas, para validar fechas:

  1. HTML5 incorporó un nuevo tipo de <input>, Input Type Date (ver compatibilidad!).

    document.getElementById("input-fecha")
      .addEventListener("input", function(evt) {
        let fechaIngresada = evt.target.value;
        //Fecha válida?
        if (fechaIngresada) {
            document.getElementById("salida")
              .innerText = fechaIngresada;
        } else {
            document.getElementById("salida")
              .innerText = "Fecha Inválida";
        }
      });
    <input id="input-fecha" type="date" required="required" min="1920-01-01" max="2999-12-31">
    <pre id="salida"></pre>

  2. Usar Moment.js, que genera un wrapper para Date (o incluso se puede llevar a Date).

    let formatos = ['D/M/YYYY', 'D-M-YYYY'],
        a,b,c,
        fecha;
    
    //validar
    a = moment('29/2/2016',  formatos, true).isValid();  // true
    b = moment('29/02/2017', formatos, true).isValid();  // false
    c = moment('1-1-1900',   formatos, true).isValid();  // true
    console.log(a,b,c);
    
    //convertir en Date
    fecha = moment('29/02/2016', formatos, true).toDate();
    console.log('Fecha: ' + fecha);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

  3. Convertir a Date y ver si mantiene el mismo valor.

    function convertirFecha(texto) {
        let partes = (texto || '').split('/'),
            fechaGenerada = new Date(partes[2], --partes[1], partes[0]);
        
        if (partes.length == 3 && fechaGenerada
         && partes[0] == fechaGenerada.getDate()
         && partes[1] == fechaGenerada.getMonth()
         && partes[2] == fechaGenerada.getFullYear()) {
            return fechaGenerada;
        }
        return false; //Inválida
    }
    
    console.log(convertirFecha('29/2/2016')); //fecha (evalúa true)
    console.log(convertirFecha('29/2/2017')); //false
    
       

  4. Usar un regex para validar que sean dígitos, y luego validar manualmente cada valor.

    function fechaValida(texto) {
        let partes = /^(\d{1,2})[/](\d{1,2})[/](\d{3,4})$/.exec(texto);
        
        if (!partes) return false; //no coincide el regex
    
        //Obtener las partes
        let d = parseInt(partes[1], 10),
            m = parseInt(partes[2], 10),
            a = parseInt(partes[3], 10);
    
        //Validar manualmente
        if (!a || !m || m > 12 || !d) return false;
    
        let diasPorMes = [31,28,31,30,31,30,31,31,30,31,30,31 ];
    
        //Si es bisiesto, febrero tiene 29
        if (m == 2 && (a % 4 == 0 && a % 100 != 0) || a % 400 == 0)
            diasPorMes[1] = 29;
    
        //Que no tenga más días de los permitidos en el mes
        if (d > diasPorMes[m - 1]) return false;
        
        //Fecha válida
        return new Date(a,m,d);
    }
    
    console.log(fechaValida('29/2/2016')); //fecha (evalúa true)
    console.log(fechaValida('29/2/2017')); //false

  5. Con jQuery y jQuery UI, usando el wiget Datepicker. Se puede mostrar el widget, o no. Sólo se necesita llamar al método $.datepicker.parseDate(). En el ejemplo, se puede ingresar la fecha en el input o en el datepicker. Sin embargo, se podría deshabilitar el input para que no se ingrese manualmente. Sino, otra alternativa es no usar un input, y mostrar el datepicker constantemente en un div.

    $(function() { // Gestor para $(document).ready()
    
      // jQuery UI Datepicker
      //  - http://api.jqueryui.com/datepicker/
      $.datepicker.setDefaults(
        $.datepicker.regional["es"]
      );
    
      let opciones = {
        dateFormat: "dd/mm/yy",
        yearRange: "1500:",
        maxDate: "2w",
        defaultDate: 0,
        constrainInput: true,
        autoSize: true,
        appendText: "(d/m/aaaa)",
        showAnim: "slideDown",
        numberOfMonths: 1,
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        showMonthAfterYear: false,
        firstDay: 0,
        showWeek: false,
        /*
        prevText: "≪ Ant",
        nextText: "Sig ≫",
        closeText: "Cerrar",
        currentText: "Hoy",
        weekHeader: "N°",
        dayNames: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
        dayNamesShort: ["Dom", "Lun", "Mar", "Mié", "Juv", "Vie", "Sáb"],
        dayNamesMin: ["D", "L", "M", "Mi", "J", "V", "S"],
        monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        monthNamesShort: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        */
    
        //Evento cuando se selecciona una fecha
        onSelect: validarFecha
      };
    
      //Inicializar el Datepicker
      let datepicker = $('#fecha').datepicker(opciones);
    
      //Evento cuando se cambia
      $("#fecha").on("input", validarFecha);
    });
    
    
    //Validar la fecha cuando cambia el valor de la fecha
    //Disparado input.on("input") y datepicker.onSelect
    function validarFecha() {
      try {
        //Si es inválida dispara el error
        let fecha = $.datepicker.parseDate("dd/mm/yy", $("#fecha").val());
        // mostrar la fecha válida
        $("#salida").text(
          "Fecha válida:\n" + fecha
        );
      } catch (err) {
        // mostrar error
        $("#salida").text("Fecha INVÁLIDA");
      }
    }
    <!-- Referencias al DatePicker -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
    
    <!-- HTML -->
    <pre id="salida" style="height: 3em"></pre>
    <input type="text" id="fecha" name="fecha" placeholder="Ingrese la fecha">

  6. Usar bootstrap-datepicker (similar al anterior).

    $(function() {
      //Inicializar el datepicker
      // - Sandbox: https://uxsolutions.github.io/bootstrap-datepicker/
      $('#fecha').datepicker({
        format: "dd/mm/yyyy",
        weekStart: 0,
        todayBtn: true,
        language: "es",
        daysOfWeekHighlighted: "0,6",
        todayHighlight: true
      }).on("changeDate", function(e) {
        //e.date también tiene la fecha
        $("#salida").text(
          "Fecha:\n" +
          $('#fecha').datepicker("getDate")
        );
      });
    });
    <!-- Referencias a bootstrap-datepicker -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
    <link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.min.css" rel="stylesheet">
    
    
    <!-- HTML -->
    <div id="fecha"></div>
    <pre id="salida"></pre>


RegEx para validar cualquier fecha d/m/aaaa regex101.com

Valida cualquier fecha, incluyendo los días de febrero en años bisiestos.

/^(?:(?:(?:0?[1-9]|1\d|2[0-8])[/](?:0?[1-9]|1[0-2])|(?:29|30)[/](?:0?[13-9]|1[0-2])|31[/](?:0?[13578]|1[02]))[/](?:0{2,3}[1-9]|0{1,2}[1-9]\d|0?[1-9]\d{2}|[1-9]\d{3})|29[/]0?2[/](?:\d{1,2}(?:0[48]|[2468][048]|[13579][26])|(?:0?[48]|[13579][26]|[2468][048])00))$/

https://www.debuggex.com/r/bNB5k2szRN24GDAJ



Código para validar y extraer día, mes y año (detallado con variables)

Sobre la expresión anterior, usamos paréntesis (grupos) para obtener cada una de las partes:

 /^(?:(?:(0?[1-9]|1\d|2[0-8])[/](0?[1-9]|1[0-2])|(29|30)[/](0?[13-9]|1[0-2])|(31)[/](0?[13578]|1[02]))[/](0{2,3}[1-9]|0{1,2}[1-9]\d|0?[1-9]\d{2}|[1-9]\d{3})|(29)[/](0?2)[/](\d{1,2}(?:0[48]|[2468][048]|[13579][26])|(?:0?[48]|[13579][26]|[2468][048])00))$/

//Devuelve el regex para validar una fecha.
// - dividido en variables para que se entienda y se pueda mantener/editar.
//
function regexValidarFecha() {
    let sep              = "[/]",
    
        dia1a28          = "(0?[1-9]|1\\d|2[0-8])",
        dia29            = "(29)",
        dia29o30         = "(29|30)",
        dia31            = "(31)",
        
        mes1a12          = "(0?[1-9]|1[0-2])",
        mes2             = "(0?2)",
        mesNoFeb         = "(0?[13-9]|1[0-2])",
        mes31dias        = "(0?[13578]|1[02])",
        
        diames29Feb      = dia29+sep+mes2,
        diames1a28       = dia1a28+sep+mes1a12,
        diames29o30noFeb = dia29o30+sep+mesNoFeb,
        diames31         = dia31+sep+mes31dias,
        diamesNo29Feb    = "(?:"+diames1a28+"|"+diames29o30noFeb+"|"+diames31+")",
        
        anno1a9999     = "(0{2,3}[1-9]|0{1,2}[1-9]\\d|0?[1-9]\\d{2}|[1-9]\\d{3})",
        annoMult4no100   = "\\d{1,2}(?:0[48]|[2468][048]|[13579][26])",
        annoMult400      = "(?:0?[48]|[13579][26]|[2468][048])00",
        annoBisiesto     = "("+annoMult4no100+"|"+annoMult400+")",
        
        fechaNo29Feb     = diamesNo29Feb+sep+anno1a9999,
        fecha29Feb       = diames29Feb+sep+annoBisiesto,
        
        fechaFinal       = "^(?:"+fechaNo29Feb+"|"+fecha29Feb+")$";
    
    return new RegExp(fechaFinal);
}

//Valida una fecha ingresada como "m/d/aaaa"
// - Si no es válida, devuelve false
// - Si es válida, devuelve un objeto {d:"día",m:"mes",a:"año",date:date}
// - Parámetro: UTC (opcional) si se debe devolver {date:(date)} en UTC
//
function validarFecha(texto, UTC = false) {
    let fechaValida = regexValidarFecha(),
        // fechaValida = /^(?:(?:(0?[1-9]|1\d|2[0-8])[/](0?[1-9]|1[0-2])|(29|30)[/](0?[13-9]|1[0-2])|(31)[/](0?[13578]|1[02]))[/](0{2,3}[1-9]|0{1,2}[1-9]\d|0?[1-9]\d{2}|[1-9]\d{3})|(29)[/](0?2)[/](\d{1,2}(?:0[48]|[2468][048]|[13579][26])|(?:0?[48]|[13579][26]|[2468][048])00))$/,
        grupos;
        
    if (grupos = fechaValida.exec(texto)) {
        //Unir día mes y año desde los grupos que pueden haber coincidido
        let d = [grupos[1],grupos[3],grupos[5],grupos[8]].join(''),
            m = [grupos[2],grupos[4],grupos[6],grupos[9]].join(''),
            a = [grupos[7],grupos[10]].join(''),
            date = new Date(0);

        //Obtener la fecha en formato local o UTC
        if (UTC) {
            date.setUTCHours(0);
            date.setUTCFullYear(a,parseInt(m,10) - 1,d);
        } else {
            date.setHours(0);
            date.setFullYear(a,parseInt(m,10) - 1,d);
        }
        
        //Devolver como objeto con cada número por separado
        return {
            d: d,
            m: m,
            a: a,
            date: date
        };
    }
    return false; //No es fecha válida
}


// -----------
//   PRUEBA
// -----------
let inputFecha = document.getElementById("input-fecha");

//asociar evento cuando se modifique el input
inputFecha.addEventListener("input",function(evt){
    let texto = evt.target.value,
        salida = document.getElementById("salida"),
        resultado;
    
    //VALIDAR    
    resultado = validarFecha(texto);

    if (resultado) {
        salida.innerText =
            "Día: "     + resultado.d +
            "\nMes: "   + resultado.m +
            "\nAño: "   + resultado.a +
            "\nFecha:\n"+ resultado.date;
    } else {
        salida.innerText = "Fecha incorrecta";
    }
});
inputFecha.dispatchEvent(new Event('input')); //validar al iniciar
<input id="input-fecha" type="text"
       placeholder="Ingrese una fecha (d/m/aaa)"
       value="29/02/2016"
       style="width: 100%">
<pre   id="salida"></pre>

4

El problema está en la RegExp vregexNaix, que no acepta ni el 10 ni el 20

Una solución sería modificar dicha RegExp, por ejemplo así:

/^(0[1-9]|[1-2]\d|3[01])(\/)(0[1-9]|1[012])\2(\d{4})$/

Demo:

var vregexNaix = /^(0[1-9]|[1-2]\d|3[01])(\/)(0[1-9]|1[012])\2(\d{4})$/;
console.log(vregexNaix.test('10/12/1992'));
console.log(vregexNaix.test('20/10/2082'));

2
  • En la última respuesta al post social.msdn.microsoft.com/Forums/es-ES/… he encontrado una expresión regular que permite meter días o meses con un solo dígito y controla los años bisiestos. Para que me funcionara he tenido que eliminar los enlaces de línea ” & _ “ Commented el 1 abr. 2017 a las 8:15
  • @JoanIngladaRoig - El problema de usar ese tipo de expresiones regulares de cualquier lado es que puede ser difícil de ver lo mal que funciona. Ese código no sólo es ineficiente, redundante en la comprobación de bisiestos y utiliza memoria innecesaria, sino que también permite datos absurdos como 29.2/0000.
    – Mariano
    Commented el 2 abr. 2017 a las 11:49
2

Creo que la manera mas sencilla de realizar la validación de una fecha sin tanto código sería:

<html>
    <head><title>Validar una fecha dd/mm/aaaa con JavaScript</title></head>
   <body>

<script type="text/javascript"><!--
   function esfechavalida() {
      var fecha = document.forma.fecha.value;

      // La longitud de la fecha debe tener exactamente 10 caracteres
      if ( fecha.length !== 10 )
         error = true;

      // Primero verifica el patron
      if ( !/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(fecha) )
         error = true;

      // Mediante el delimitador "/" separa dia, mes y año
      var fecha = fecha.split("/");
      var day = parseInt(fecha[0]);
      var month = parseInt(fecha[1]);
      var year = parseInt(fecha[2]);

      // Verifica que dia, mes, año, solo sean numeros
      error = ( isNaN(day) || isNaN(month) || isNaN(year) );

      // Lista de dias en los meses, por defecto no es año bisiesto
      var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
      if ( month === 1 || month > 2 )
         if ( day > ListofDays[month-1] || day < 0 || ListofDays[month-1] === undefined )
            error = true;

      // Detecta si es año bisiesto y asigna a febrero 29 dias
      if ( month === 2 ) {
         var lyear = ( (!(year % 4) && year % 100) || !(year % 400) );
         if ( lyear === false && day >= 29 )
            error = true;
         if ( lyear === true && day > 29 )
            error = true;
      }

      if ( error === true ) {
         alert("Fecha Inválida: * La Fecha debe tener el formato: dd/mm/aaaa (dia/mes/año).\n");
         return false;
      }
      else
         alert("Fecha Válida\n");

      return true;
   }
//--></script>

      <form name="forma" action="http://localhost:8888/esfecha.html" method="post">
         <table>
            <tr>
               <td>
                  Fecha:
                  <input type="text" name="fecha" maxlength="10" id="fecha" onchange="return esfechavalida();" />
               </td>
               <td>
                   <input type="submit" value="Submit">
               </td>
            </tr>
         </table>
      </form>
   </body>
</html>
-2

Agregue (-) para validar "01-03-1993".

/^(?:(?:(?:0?[1-9]|1\d|2[0-8])[/-](?:0?[1-9]|1[0-2])|(?:29|30)[/-](?:0?[13-9]|1[0-2])|31[/](?:0?[13578]|1[02]))[/-](?:0{2,3}[1-9]|0{1,2}[1-9]\d|0?[1-9]\d{2}|[1-9]\d{3})|29[/-]0?2[/-](?:\d{1,2}(?:0[48]|[2468][048]|[13579][26])|(?:0?[48]|[13579][26]|[2468][048])00))$/
2
  • 3
    Explica cual es el problema y como funciona tu solución.
    – David Isla
    Commented el 18 ene. 2018 a las 19:47
  • 1
    Y si estás tomando mi código, modificando cada / por [-/], agradecería que lo menciones. Pero fijate que te olvidaste del que va después del 31
    – Mariano
    Commented el 19 ene. 2018 a las 9:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.