使用 JQuery Validate [重复] 以 dd/mm/yyyy 格式验证日期

【问题标题】：Validate date in dd/mm/yyyy format using JQuery Validate [duplicate]使用 JQuery Validate [重复] 以 dd/mm/yyyy 格式验证日期
【发布时间】：2014-08-14 08:12:43
【问题描述】：

我正在输入出生日期和死亡日期。需要验证

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

验证没有按预期工作，无法找出问题所在。请帮忙。

Fiddle code

使用的JS库

  1. 日历/日期选择器的 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));

【问题讨论】：

  • 当你写的时候：dateFormat : "dd/mm/yy" 是否还包括"dd.mm.yy" 和"dd-mm-yy" ??
  • 我使用了简化正则表达式：jQuery.validator.addMethod("checkDateOfBirth", function(value) { return value.match(/^(0[1-9]|1[012])[ - /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$/); }, "无效日期" );月（1-12）日（1-31）年（19xx - 20xx）

标签： javascript jquery validation date datetime


【解决方案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/....

【讨论】：

  • 感谢这张图和正则表达式！是生成的吗？如果是，您能告诉我们工具的名称是什么吗？
  • 这里：regexper.com
  • mm/dd/yyyy 格式有吗？
  • @LeoCavalcante，这太棒了！像魅力一样工作！非常感谢！
  • 令人印象深刻！这甚至可以应对 100 年和 400 年的闰年变化。
【解决方案2】：

您不需要date 验证器。它doesn't support dd/mm/yyyy format，这就是为什么您会收到“请输入有效日期”消息，如 2014 年 1 月 1 日这样的输入。您已经拥有 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);
}

【讨论】：

  • 感谢您花时间阅读我的代码。在采纳您的建议后，代码似乎可以正常工作。答对了！ :)... 我的大部分时间都花在为验证器寻找其他方法以及为 UI 小部件寻找 en-GB 格式上。我应该删除 date:true 规则 :)
  • 即使我输入了无效的日期，它也总是返回一个日期。
  • 如果要解析小时和分钟怎么办？
  • 这个函数不是用来验证日期的。 OP 已经在使用 dateITA 验证器，此功能仅有助于实现额外的 dateGreaterThan 和 dateLessThan 验证器。
【解决方案3】：

如果你使用 moment 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");

【讨论】：

  • 当您在 ''DD/MM/YYYY" 中验证日期时是否还包括 dateFormat : "dd-mm-yy" 和 dd.mm.yy ???
  • 如果你添加 OR，就会成功：return this.optional(element) ||时刻（值，“DD/MM/YYYY”）.isValid（）|| moment(value,"DD-MM-YYYY").isValid();
  • 这将失败： moment(1,"DD/MM/YYYY").isValid();时刻将返回 true 。
【解决方案4】：

我在我的项目中遇到了类似的问题。经过一番苦苦挣扎，我找到了这个解决方案：

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

你不需要像 jQuery Validate 或 Moment.js 这样的插件来解决这个问题。希望这个解决方案有所帮助。

【讨论】：

  • 最简单实用的解决方案。谢谢。
  • 但是你需要 JQuery UI。
  • 就像你说的——你不需要插件。这很有效。如果输入为假，则抛出异常。非常感谢:)
【解决方案5】：

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

参考（正则表达式）：Regex to validate date format 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
        }
    }
});

【讨论】：

  • 不应直接编辑 jQuery 验证核心文件。很危险
【解决方案6】：

这对我来说很好。

$(document).ready(function () {
       $('#btn_move').click( function(){
           var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
           var Val_date=$('#txt_date').val();
               if(Val_date.match(dateformat)){
              var seperator1 = Val_date.split('/');
              var seperator2 = Val_date.split('-');

              if (seperator1.length>1)
              {
                  var splitdate = Val_date.split('/');
              }
              else if (seperator2.length>1)
              {
                  var splitdate = Val_date.split('-');
              }
              var dd = parseInt(splitdate[0]);
              var mm  = parseInt(splitdate[1]);
              var yy = parseInt(splitdate[2]);
              var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
              if (mm==1 || mm>2)
              {
                  if (dd>ListofDays[mm-1])
                  {
                      alert('Invalid date format!');
                      return false;
                  }
              }
              if (mm==2)
              {
                  var lyear = false;
                  if ( (!(yy % 4) && yy % 100) || !(yy % 400))
                  {
                      lyear = true;
                  }
                  if ((lyear==false) && (dd>=29))
                  {
                      alert('Invalid date format!');
                      return false;
                  }
                  if ((lyear==true) && (dd>29))
                  {
                      alert('Invalid date format!');
                      return false;
                  }
              }
          }
          else
          {
              alert("Invalid date format!");

              return false;
          }
       });
   });

【讨论】：

猜你喜欢
  • 2017-04-07
  • 2014-01-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-29
  • 2012-05-05
  • 2011-02-12
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode