使用JQuery Validate以dd/mm/yyyy格式验证日期

Question

我正在记录出生日期和死亡日期.需要验证

1. 死亡日期应超过出生日期
2. 日期格式为dd/mm/yyyy
3. 日期小于或等于今天.

验证无法按预期工作,无法解决问题.请帮忙.

小提琴代码

使用JS库

1. Calendar/Datepicker的JQuery UI
2. JQuery验证表单验证

3. 验证库的其他方法

   var today = new Date();
   var authorValidator = $("#itemAuthorForm").validate({
   rules : {
       dateOfBirth : {
           required : false,
           date : true,
           dateITA : true,
           dateLessThan : '#expiredDate'
       },
       expiredDate : {
           required : false,
           date : true,
           dateITA : true,
           dateGreaterThan : "#dateOfBirth"
       }
   },
   onfocusout : function(element) {
       if ($(element).val()) {
           $(element).valid();
       }
   }
   });
   var dateOptionsDOE = {
   maxDate : today,
   dateFormat : "dd/mm/yy",
   changeMonth : true,
   changeYear : true,
   onClose : function(selectedDate) {
       $("#dateOfBirth").datepicker("option", "maxDate", selectedDate);
   }
   };
   var dateOptionsDOB = {
   maxDate : today,
   dateFormat : "dd/mm/yy",
   changeMonth : true,
   changeYear : true,
   onClose : function(selectedDate) {
       $("#expiredDate").datepicker("option", "minDate", selectedDate);
   }
    };
   
   jQuery.validator.addMethod("dateGreaterThan",
   function(value, element, params) {
   if ($(params).val() === "")
       return true;
   
   if (!/Invalid|NaN/.test(new Date(value))) {
       return new Date(value) > new Date($(params).val());
   }
   return isNaN(value) && isNaN($(params).val())
           || (Number(value) > Number($(params).val()));
           }, 'Must be greater than {0}.');
           jQuery.validator.addMethod("dateLessThan",
           function(value, element, params) {
   if ($(params).val() === "")
       return true;
   
   if (!/Invalid|NaN/.test(new Date(value))) {
       return new Date(value) < new Date($(params).val());
   }
   
   return isNaN(value) && isNaN($(params).val())
           || (Number(value) < Number($(params).val()));
           }, 'Must be less than {0}.');
           $("#expiredDate").datepicker(
       $.extend({}, $.datepicker.regional['en-GB'], dateOptionsDOE));
           $("#dateOfBirth").datepicker(
       $.extend({}, $.datepicker.regional['en-GB'], dateOptionsDOB));
   

Answer 1

这也将在闰年检查.这是纯正则表达式,所以它比任何lib都快(也比moment.js快).但是如果你要在你的代码中使用很多日期,我建议你使用moment.js

var dateRegex = /^(?=\d)(?:(?:31(?!.(?:0?[2469]|11))|(?:30|29)(?!.0?2)|29(?=.0?2.(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(?:\x20|$))|(?:2[0-8]|1\d|0?[1-9]))([-.\/])(?:1[012]|0?[1-9])\1(?:1[6-9]|[2-9]\d)?\d\d(?:(?=\x20\d)\x20|$))?(((0?[1-9]|1[012])(:[0-5]\d){0,2}(\x20[AP]M))|([01]\d|2[0-3])(:[0-5]\d){1,2})?$/;

console.log(dateRegex.test('21/01/1986'));

HTTP://regexper.com/....

Answer 2

您不需要date验证器.它不支持dd/mm/yyyy格式,这就是为什么你得到"请输入有效日期"消息的输入,如13/01/2014.您已经有dateITA验证器,它根据您的需要使用dd/mm/yyyy格式.

就像date验证器,您的代码dateGreaterThan和dateLessThan调用new Date输入字符串一样,解析日期也有同样的问题.您可以使用这样的函数来解析日期:

function parseDMY(value) {
    var date = value.split("/");
    var d = parseInt(date[0], 10),
        m = parseInt(date[1], 10),
        y = parseInt(date[2], 10);
    return new Date(y, m - 1, d);
}

Answer 3

如果您使用时刻js库,它可以很容易地像这样 -

jQuery.validator.addMethod("validDate", function(value, element) {
        return this.optional(element) || moment(value,"DD/MM/YYYY").isValid();
    }, "Please enter a valid date in the format DD/MM/YYYY");

Answer 4

我在项目中遇到了类似的问题.经过艰苦的努力,我找到了这个解决方案:

if ($.datepicker.parseDate("dd/mm/yy","17/06/2015") > $.datepicker.parseDate("dd/mm/yy","20/06/2015"))
    // do something

对于此问题,您不需要像jQuery Validate或Moment.js这样的插件.希望此解决方案有所帮

Answer 5

这将验证 dd/mm/yyy 日期。编辑您的 jquery.validate.js 并添加这些。

参考（正则表达式）：正则表达式验证日期格式 dd/mm/yyyy

dateBR: function( value, element ) {
    return this.optional(element) || /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/.test(value);
}

messages: {
    dateBR: "Invalid date."
}

classRuleSettings: {
    dateBR: {dateBR: true}
}

用法：

$( "#myForm" ).validate({
    rules: {
        field: {
            dateBR: true
        }
    }
});