HTML5日期验证

HTML5 Date Validation

本文关键字：验证 日期 HTML5      更新时间：2023-10-07

我希望为移动站点实现验证，其中我有两个输入字段，我希望第一个字段在今天之前验证值，第二个字段在第一个值之前一年内验证值。

E.g

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

这可能吗？

我喜欢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!
}

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） 将其设置为d2 的max属性的值

d2.setAttribute("max", maxi);

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

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

使用javascript效果更佳。我可以使用HTML5属性type="date"，但请记住，它几乎不受支持。

您可以使用类似/([0-9]{2})/([0-9]{2})/([0-9]{4})/的Regex模式，即两个十进制数字、一个斜线、两个以上的十进制数字、斜线和四个十进制数字，所有内容都单独分组（组1=天，组2=月，组3=年）。您将在事件中测试这种模式（我建议onchange，因为您提到了移动设备），并检查数字是否在有效范围内（例如，天<32，月<13，年<currentYear-1）。

相关文章：