Formato de fecha personalizado con el complemento de validación de jQuery


Respuestas:


129

Puede crear su propio método de validación personalizado utilizando la addMethodfunción. Supongamos que desea validar "dd / mm / aaaa":

$.validator.addMethod(
    "australianDate",
    function(value, element) {
        // put your own logic here, this is just a (crappy) example
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
    },
    "Please enter a date in the format dd/mm/yyyy."
);

Y luego en su formulario agregue:

$('#myForm')
    .validate({
        rules : {
            myDate : {
                australianDate : true
            }
        }
    })
;

13
@blasteralfred:// put your own logic here, this is just a (crappy) example
nickf

¿Puedes sugerirme una sintaxis que valide mi formato requerido DD-MM-AAAA? Soy un principiante en jquery .. :)
Alfred

Debe tenerse en cuenta que debe cambiar myDateel nombre del campo de entrada de fecha.
user2019515

Puede reemplazar el ejemplo reg-ex con; return value.match (/ ^ (((((0 [1-9]) | (1 \ d) | (2 [0-8])) \ / ((0 [1-9]) | (1 [ 0-2]))) | ((31 \ / ((0 [13578]) | (1 [02]))) | ((29 | 30) \ / ((0 [1,3-9]) | (1 [0-2]))))) \ / ((20 [0-9] [0-9]) | (19 [0-9] [0-9]))) | ((29 \ / 02 \ / (19 | 20) (([02468] [048]) | ([13579] [26])))) $ /); Esto admite la comprobación de años bisiestos. P.ej. 29/02/20014 FALLARÁ la validación 29/02/2016 PASARÁ la validación.
Gavin Baumanis

58

La respuesta de nickf es buena, pero tenga en cuenta que el complemento de validación ya incluye validadores para varios otros formatos de fecha, en el archivo additional-methods.js. Antes de escribir el suyo, asegúrese de que alguien no lo haya hecho todavía.


establecer la fecha de la regla ISO: verdadero, valida la fecha en el formato aaa-mm-dd
gentrobot

1
¡Muchas gracias! Hay "dateITA" para el formato "dd / mm / aaaa", por ejemplo.
Alen Siljak

22

Yo personalmente uso la muy buena biblioteca http://www.datejs.com/ .

Docco aquí: http://code.google.com/p/datejs/wiki/APIDocumentation

Puede utilizar lo siguiente para obtener su formato australiano y validará el día bisiesto 29/02/2012 y no el 29/02/2011:

jQuery.validator.addMethod("australianDate", function(value, element) { 
    return Date.parseExact(value, "d/M/yyyy");
});

$("#myForm").validate({
   rules : {
      birth_date : { australianDate : true }
   }
});

También utilizo el complemento de entrada enmascarado para estandarizar los datos http://digitalbush.com/projects/masked-input-plugin/

$("#birth_date").mask("99/99/9999");

18

A continuación, se muestra un ejemplo de un nuevo método de validación que validará casi cualquier formato de fecha, incluidos:

  • dd / mm / aa o dd / mm / aaaa
  • dd.mm.aaa o dd.mm.aaaa
  • dd, mm, aa o dd, mm, aaaa
  • dd mm aa o dd mm aaaa
  • dd-mm-aa o dd-mm-aaaa

Luego, cuando pasa el valor al php, puede convertirlo con strtotime

A continuación se explica cómo agregar el método:

    $.validator.addMethod("anyDate",
    function(value, element) {
        return value.match(/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2])[/., -](19|20)?\d{2}$/);
    },
    "Please enter a date in the format!"
);

Luego agrega el nuevo filtro con:

$('#myForm')
.validate({
    rules : {
        field: {
            anyDate: true
        }
    }
})

;


y para incluir mmm, he usado ligeramente modificada la expresión regular a/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2]|[a-zA-Z]{3})[/., -](19|20)?\d{2}$/
Warren

13

Aquí hay una muestra de código específico que funcionó para mí recientemente:

// Replace the builtin US date validation with UK date validation
$.validator.addMethod(
    "date",
    function ( value, element ) {
        var bits = value.match( /([0-9]+)/gi ), str;
        if ( ! bits )
            return this.optional(element) || false;
        str = bits[ 1 ] + '/' + bits[ 0 ] + '/' + bits[ 2 ];
        return this.optional(element) || !/Invalid|NaN/.test(new Date( str ));
    },
    "Please enter a date in the format dd/mm/yyyy"
);

Debo señalar que esto realmente reemplaza la rutina de validación de fecha incorporada, aunque no pude ver que esto debería causar un problema con el complemento actual.

Luego apliqué esto al formulario usando:

$( '#my_form input.date' ).rules( 'add', { date: true } );

6

Este soy yo combinando / modificando publicaciones anteriores para lograr el resultado deseado:

        // Override built-in date validator
        $.validator.addMethod(
            "date",
            function (value, element) {
                //Return            NB: isRequired is not checked at this stage
                return (value=="")? true : isDate(value);
            },
            "* invalid"
        );

Agregue la validación de fecha después de su configuración de validación. Es decir, después de llamar al método $ (formulario) .validate ({...}).

        //Add date validation (if applicable)
        $('.date', $(frmPanelBtnId)).each(function () {
            $(this).rules('add', {
                date: true
            });
        });

Finalmente, la función principal isDate Javascript modificada para el formato de fecha del Reino Unido

//Validates a date input -- http://jquerybyexample.blogspot.com/2011/12/validate-date-    using-jquery.html
function isDate(txtDate) {
    var currVal = txtDate;
    if (currVal == '')
       return false;

  //Declare Regex  
  var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
  var dtArray = currVal.match(rxDatePattern); // is format OK?

  if (dtArray == null)
      return false;

   //Checks for dd/mm/yyyy format.
   var dtDay = dtArray[1];
   var dtMonth = dtArray[3];
   var dtYear = dtArray[5];

  if (dtMonth < 1 || dtMonth > 12)
      return false;
  else if (dtDay < 1 || dtDay > 31)
      return false;
  else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31)
      return false;
  else if (dtMonth == 2) {
      var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
      if (dtDay > 29 || (dtDay == 29 && !isleap))
          return false;
  }

  return true;
}

4

Jon, tienes algunos errores de sintaxis, mira a continuación, esto funcionó para mí.

  <script type="text/javascript">
$(document).ready(function () {

  $.validator.addMethod(
      "australianDate",
      function (value, element) {
        // put your own logic here, this is just a (crappy) example 
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
      },
      "Please enter a date in the format dd/mm/yyyy"
    );

  $('#testForm').validate({
    rules: {
      "myDate": {
        australianDate: true
      }
    }
  });

});             


3
$.validator.addMethod("mydate", function (value, element) {

        return this.optional(element) || /^(\d{4})(-|\/)(([0-1]{1})([1-2]{1})|([0]{1})([0-9]{1}))(-|\/)(([0-2]{1})([1-9]{1})|([3]{1})([0-1]{1}))/.test(value);

    });

puedes ingresar como yyyy-mm-ddtambiényyyy/mm/dd

pero no puedo juzgar el tamaño del mes en algún momento de febrero, solo 28 o 29 días.



1

@blasteralfred:

Obtuve la siguiente regla que valida la fecha correcta para mí (DD MM AAAA)

jQuery.validator.addMethod(
"validDate",
function(value, element) {
    return value.match(/(?:0[1-9]|[12][0-9]|3[01]) (?:0[1-9]|1[0-2]) (?:19|20\d{2})/);
},
"Please enter a valid date in the format DD MM YYYY"

);

Para DD / MM / AAAA

jQuery.validator.addMethod(
"validDate",
function(value, element) {
    return value.match(/(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/);
},
"Please enter a valid date in the format DD/MM/YYYY"

);

Esto no validará el 13 de enero de 2017 y el 13 de enero de 2017.

Y tampoco valida 50 12 2017 y 50/12/2017.


0

Es fácil, ejemplo: válido para HTML5 tipo automático = "fecha" .

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/localization/messages_es.js"></script>

$(function () {

        // Overload method default "date" jquery.validate.min.js
        $.validator.addMethod(
            "date",
            function(value, element) {
                var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/;
                return value.match(dateReg);
            },
            "Invalid date"
        );

     // Form Demo jquery.validate.min.js
     $('#form-datos').validate({
        submitHandler: function(form) {
            form.submit();
        }
    });

});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.