javascript中的日期输入类型验证？

Question

我不太清楚如何在 javascript 中验证日期输入类型。我尝试在互联网上查找，但我找不到任何东西。

我有一个字段要求用户输入其生日。我想在 javascript 中验证它，并且对天数、尤其是数年有一定的限制。例如，如果用户输入超过 2016 年（或当前年份），则会出错。 我不太清楚如何“提取”日期输入类型并控制它的每个元素（日、月、年）。

这是我的html的一部分

<form method="POST" action="request.jsp" onsubmit="return validate()">
Date of birth: <input type="date" id="bday" name="bday" value="">
</form>

Javascript：

var birthday = document.getElementById('bday').value;

这就是我所拥有的一切......请帮忙？

Answer 1

TLDR

您必须将字符串解析为日期（JavaScript 为这个用例提供了 Date API）。

完整答案

你在正确的轨道上。这是我做的JSBin 示例。尝试打开控制台并更改日期，您会看到它已记录。

$('#birthday').on('change', function() {
   console.log(new Date(this.value));
});

（我在上面的例子中使用 jQuery 只是为了方便，但你可以使用任何你想要的。）

您遇到的问题是日期被记录为字符串。您可以使用 JavaScript Date 对象来解析字符串。

根据您想要执行的任何验证，您可以使用各种日期对象方法（例如getFullYear）并将这些方法与输入进行匹配。

我将把完整的实现留给你，但change 处理程序的内部可能如下所示：

var date = new Date(this.value);

if(date.getFullYear() > 2016) {
  // do something (like show a message, for example)
}

Answer 2

如果您能够通过以下方式获取输入元素的值：

 var birthday = document.getElementById('bday').value;

然后birthday 将作为字符串 提供给您（所有输入值始终作为字符串返回给JavaScript）。从那里，您需要将该字符串转换为日期：

 var dob = Date.parse(birthday);

然后，一旦您获得了整个日期，您就可以使用各种 JavaScript 日期/时间方法提取其中的各个部分：

 var month = dob.getMonth(); // months start counting from zero!
 var day   = dob.getDate();
 var year  = dob.getFullYear();  // getYear() provides 3 digit year!

这是一个工作示例：

var birthday = null, btn = null, output = null;

// Wait until the document is ready for interaction:
window.addEventListener("DOMContentLoaded", function(){

     // Get references to DOM elements needed:
     birthday = document.getElementById('bDate');
     btn = document.getElementById('btnGetDate');
     output = document.getElementById('result');


     // Set up an event callback for when the button gets clicked:      
     btn.addEventListener("click", function(){
       

        // Create a new Date that converts the input date
        var dob =new Date(birthday.value);
        alert(dob);

        // Extract pieces of the date:
        var month = dob.getMonth(); // months start counting from zero!
        var day   = dob.getDate();  
        var year  = dob.getFullYear();

        // Now that you have the pieces of the date, you can validate as you wish:
        // e.g. if(year > 2016) { . . . }
  
        // Write out date:
        output.innerHTML = ++month + "/" + ++day + "/" + year; 

     });
  
});





  

<input type="date" id="bDate">
<input type="button" id="btnGetDate" value="Get Date">
<p id="result"></p>

注意：请记住，夏令时会影响 结果取决于它是一天中的什么时间。看： How to check if the DST (Daylight Saving Time) is in effect and if it is what's the offset? 了解更多信息。关于那个。

Answer 3

并非所有浏览器都支持输入类型日期，因此您应该检测到这一点并将输入替换为包含所需格式的合适替代项。

在支持的情况下，输入将返回不带时区的 ISO 8601 格式日期字符串。根据 ISO 8601，这应该被视为本地，但 TC39 在他们的智慧中决定它应该被视为 UTC，所以这就是 Date.parse（和 Date 构造函数）将在 most 中执行的操作案例。在某些情况下，它将被视为本地，而在 IE 8 中则被视为无效。因此，对于时区在格林威治以西的系统，Date.parse('2016-03-20') 将返回一个 Date 对象，当显示为本地日期时，它将是“2016-03-19”，即提前一天。

因此，您应该手动解析日期字符串，使用here 的众多答案之一验证日期，然后检查年、月和日是否在您的限制范围内。

Answer 4

如果你只是想验证一个字符串是否是一个有效的日期，你可以检查它是否创建了一个有效的日期对象。

function isValidDate(d){
    return !isNaN((new Date(d)).getTime());
}

https://jsfiddle.net/46cztok6/

---

所以你的validate() 函数看起来像这样。

function validate(){
    var birthday = document.getElementById('bday').value;
    if(!isValidDate(birthday)){
        alert("you did not enter a valid birthday");
        return false;
    } 
}

Answer 5

这是一个 bin，因此您可以了解如何开始验证此类字段：https://jsbin.com/lifacaxonu/edit?html,js,console,output

$('#birthday').on('change', function() {
  var val = this.value.split('-');
  if (val[0] > new Date().getFullYear()) {
    console.log('invalid')
  } else {
    console.log('ok')
  }
});