JS 检查有效的日期格式 [英] JS check for valid date format

问题描述

我有一个文本字段，用户在其中输入格式为:dd/mm/YYYY hh:ii 的日期时间.我想使用 javascript 检查这是否是有效的日期时间.这应该包括 2 月 29 日和一切.我怎样才能做到这一点?由于特殊月份，正则表达式不会成功.

I have a text field where a user inputs a date-time in the format: dd/mm/YYYY hh:ii. I want to check if this is a valid date-time using javascript. This should include 29th of february and everything. How can I do that? A regex won't succeed due to special months.

推荐答案

参见 http://internotredici.com/article/checkdateinjavascript/ 获取有关检查时间的有用文章 - 正是您想要的！

see http://internotredici.com/article/checkdateinjavascript/ for a helpful article on checking the time - just what you want!

以下是文章全文

在javascript中检查日期2006 年 1 月 31 日在脚本下发表的文章程序员经常需要验证插入表单的信息并检查它们的正确性，这对利用 javascript 很有用.本教程将解释如何使用 javascript 来验证日期是否有效.表单中的日期以两种不同的方式插入，第一种使用文本字段，用户可以在其中按照不同的模式键入数据(在本教程中，我们假设日期采用 dd-mm-yyyy 格式)；第二个使用下拉菜单.第一种解决方案实施起来更简单，但会受到用户更多错误的影响(例如，插入无效字符或以与计划格式不同的格式更频繁地键入日期).假设现在我们有以下文本字段，我们要在其中插入 dd-mm-yyyy 格式的日期:

Check date in javascript Article published on January 31, 2006 under Scripting Programmers very often needs to validate informations inserted into forms and to check their correctness is useful take advantage from javascript. This tutorial will explain how to use javascript in order to verify if a date is valid or not. Dates in forms are inserted in two different ways, the first uses a text field where user type data following different patterns (in this tutorial we assume that dates are in dd-mm-yyyy format); the second uses instead pulldown menus. The first solution is more simple to carry out, but is subject to more errors by users (for example inserting invalid characters or more frequent typing dates in a format different from the one that have been planned). Suppose now that we have the following text field in which we want to insert a date in dd-mm-yyyy format:

<form id="test_form" action="get" method="/checkdatejavascript" 
onsubmit="return(check_form(this)); return false;">
<input type="text" name="datefield" id="datefield" />
</form>

为了检查插入数据的正确性，我们将使用 check_form 函数:

To check the correctness of inserted data we will use the check_form function:

function check_form()
{
// Regular expression used to check if date is in correct format
var pattern = new RegExp([0-3][0-9]-(0|1)[0-9]-(19|20)[0-9]{2});
if(document.getElementById('datefield').value.match(pattern))
{
  var date_array = document.getElementById('datefield')
                   .value.split('-');
  var day = date_array[0];

  // Attention! Javascript consider months in the range 0 - 11
  var month = date_array[1] - 1;
  var year = date_array[2];

  // This instruction will create a date object
  source_date = new Date(year,month,day);

  if(year != source_date.getFullYear())
  {
     alert('Year is not valid!');
     return false;
  }

  if(month != source_date.getMonth())
  {
     alert('Month is not valid!');
     return false;
  }

  if(day != source_date.getDate())
  {
     alert('Day is not valid!');
     return false;
  }
}
else
{
  alert('Date format is not valid!');
  return false;
}

return true;

}正如我们所看到的，蓝色的正则表达式用于控制插入的日期是否遵循默认分配的格式.如果模式有效，则函数继续下一步，否则会引发错误消息，并且不会发送表单(正则表达式还保证该日期不能为空).为了验证日期，我们将使用 javascript 提供的 Date 对象.(检查红色证明的代码).算法非常简单.使用用户插入的信息，我们将创建一个 Date 对象，并使用 getFullYear、getMonth 和 getDate 方法生成三个值，分别代表与其关联的年、月和日.如果这些值与用户插入的值相同，则日期是正确的.现在考虑以下示例:

} As we can see, the regular expression evidenced in blue is use to control if inserted date follows or not the default assigned format. If the pattern is valid then function proceed to the next step otherwise an error message is raised abd form is not sent (the regular expression guarantees moreover that date cannot be empty). To validate the date we will use the Date object offered by javascript. (check the code evidenced in red). The algorithm is pretty simple. Using the informations inserted by user we will create a Date object and using the methods getFullYear, getMonth and getDate we will produce three values representing respectively the year, the month and the day associated to it. If these values are equal to those inserted by user, then the date is correct. Consider now the following examples:

用户在文本字段中插入字符串 09-01-1976从字符串创建的日期对象是 09-01-1976日期有效

User insert in text field the string 09-01-1976 Date object created from string is 09-01-1976 Date is valid

用户在文本字段中插入字符串 31-02-2006从字符串创建的日期对象是 03-03-2006日期无效

User insert in text field the string 31-02-2006 Date object created from string is 03-03-2006 Date is not valid

程序员必须特别注意 javascript 处理日期的方式(检查绿色代码)，因为假设 o 是 1 月，11 是 12 月，月份被认为是在 0 到 11 的范围内.在使用下拉菜单插入日期的情况下，由于不需要正则表达式来验证日期格式，因此控件更加简单:

Programmer had to take particular attention (check the code evidenced in green) in the way javascript handles dates, because months are considered in the range from 0 to 11 assuming that o is January and 11 is December. In case of pulldown menus are used to insert dates, controls are more simple due to the fact that regular expression is not need to validate date format:

  <form id="test_form" action="get" method="/checkdatejavascript" 
   onsubmit="return(check_form(this)); return false;">
  <select name="dateday" id="dateday">
  <option value="1">1</option>
     […]
  </select>
  <select name="datemonth" id="datemonth">
  <option value="0">January</option>
     […]
   </select>
   <select name="dateyear" id="dateyear">
  <option value="2006">2006</option>
     […]
  </select>
  </form>

控制日期正确性的javascript函数是

The javascript function that will controll date correctness is

 function check_form()
{
 var day = document.getElementById('dateday').value;
 var month = document.getElementById('datemonth').value;
 var year = document.getElementById('dateyear').value;

 // This instruction will create a date object
 source_date = new Date(year,month,day);

 if(year != source_date.getFullYear())
{
   alert('Year is not valid!');
   return false;
}

if(month != source_date.getMonth())
{
  alert('Month is not valid!');
  return false;
}

if(day != source_date.getDate())
{
  alert('Day is not valid!');
  return false;
}

 return true;
}

更新:我已经更新了代码，因为正则表达式有问题.感谢亚历克斯的建议

Update: I have updated the code, because there was an issue with the regular expression. Thanks to Alex for the advice

这篇关于JS 检查有效的日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！