【问题标题】:HTML5 Date ValidationHTML5 日期验证
【发布时间】:2013-11-26 07:42:37
【问题描述】:

我希望为移动网站实施验证,其中我有两个输入字段,我希望第一个验证该值不迟于今天,第二个验证它不迟于一个比第一个值提前一年。

例如

  • 第一个值 = 26/11/2013
  • 第二个值不能包含晚于 26/11/2014 的值

这可能吗?

【问题讨论】:

标签: javascript regex html


【解决方案1】:

我喜欢moment.js。它使处理日期和时间变得更容易。

首先,让我们确定一天“在明天之前”。这将取决于明天的定义是什么。

var m = moment("26/11/2013", "MM/DD/YYYY");
// tomorrow this time
var t = moment().add("days", 1);
// tomorrow start of day
var tomorrow = moment([t.year(), t.month(), t.date()]);
if (m.lessThan(tomorrow)) {
   // today!!! (or before)
}

同样,同样的方法可以在一年后使用。在这种情况下,不关心时间部分可能已经足够好了,而且我已经在另一天努力了 - 但如果它很重要(例如寻找一天的开始),请参阅前面的示例。

var m = moment("26/11/2013", "MM/DD/YYYY");
var aYearFromNow = moment().add("years", 1).add("days", 1);
if (m.lessThan(aYearFromNow)) {
   // still less than a year!
}

【讨论】:

【解决方案2】:

1) 缓存元素。

var d1 = document.getElementById('date1');
var d2 = document.getElementById('date2');

2)d1d2的值为string数据类型。所以拆分它们并将其解析为如下日期格式

var t = d1.value.split("-");
var date = new Date(parseInt(t[0], 10) + 1, parseInt(t[1], 10), t[2]);

这里年份根据d1中的值加1

4) 再次将其解析回字符串格式 (YYYY-MM-DD)

var maxi = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();    

5) 将此设置为 d2max 属性的值

d2.setAttribute("max", maxi);

最后将下面的方法添加到d1onblur事件中。

function setMaxDate() {
    var d1 = document.getElementById('date1');
    var d2 = document.getElementById('date2');
    var t = d1.value.split("-");
    var date = new Date(parseInt(t[0], 10) + 1, parseInt(t[1], 10), t[2]);
    var maxi = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();    
    d2.setAttribute("max", maxi);
}

JSFiddle

【讨论】:

    【解决方案3】:

    最好使用 javascript。我可以使用 HTML5 属性 type="date" 但请记住它是 barely supported

    【讨论】:

      【解决方案4】:

      您可以使用像 /([0-9]{2})/([0-9]{2})/([0-9]{4})/ 这样的 Regex 模式,即两个十进制数字、一个斜线、另外两个十进制数字、一个斜线和四个十进制数字,所有内容单独分组(第 1 组 = 天,第 2 组 = 月,第 3 组 = 年)。你会在一个事件中测试这种模式,(我建议onchange,因为你提到了移动)并检查数字是否在有效范围内(例如,day

      【讨论】:

        猜你喜欢
        • 2016-05-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-04-23
        • 2012-08-06
        • 2016-07-09
        相关资源
        最近更新 更多