Question

我正在寻找一个移动网站的验证，我有两个输入字段，我希望第一个验证值不迟于今天的日期，第二个验证它不迟于一个比第一个值提前一年。

E.g

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

这可能吗？

Answer 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!
}

Answer 2

1）缓存元素。

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

2）d1和d2的值为 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）将此设置为max

的 d2 属性的值

d2.setAttribute("max", maxi);

最后将以下方法添加到 onblur 的 d1 事件中。

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

Answer 3

使用javascript更好。您可以使用HTML5属性 type =“date”，但请记住它是barely supported。

Answer 4

您可以使用像/([0-9]{2})/([0-9]{2})/([0-9]{4})/这样的正则表达式模式，即两位小数，斜线，两位十进制数字，一个斜线和四位十进制数字，所有内容分别分组（组1 =日，组2 =月，第3组=年）。您将在一个事件中测试此模式，（我建议onchange，因为您提到移动）并检查数字是否在有效范围内（例如，日<＆lt; 32，month＆lt; 13，year＆lt ; currentYear-1）。

HTML5日期验证

4 个答案: