Question

我有以下表格：

<form action = "dt.jsp" METHOD = "GET" ONSUBMIT="return validateForm()">
<table>
   <tr>
     <td><input type=date name="fdate"/></td>
     <td><input type=date name="tdate"/></td>
   </tr>
</table>
<input  TYPE = "SUBMIT" VALUE = "Search by date">
</form>

我正在使用我在this answer中找到的日期比较函数和以下函数来验证表单：

 function validateForm()
 {
   if(dates.compare(document.getElementsByName('fdate')[0].value,
                 document.getElementsByName('tdate')[0].value) == -1)
 {
    alert("to date must be bigger then from date");
    return false;
 }
 }

此代码有什么问题？

Answer 1

code you are using只需将日期字符串传递给Date构造函数即可解析日期字符串。 Date构造函数需要very specific format。我怀疑它不起作用，因为你处理它的日期字符串不符合那种格式，因此Date没有产生一个有效的日期对象，导致比较函数失败。

处理日期moment.js时通常非常有帮助。在这种情况下，它可以使您不仅更灵活，更可读。片刻将允许您使用provide a list可接受的date formats，它将用于解析您提供的日期字符串。它还提供了许多比较日期的方法，例如isAfter。

使用这些代码可以重写为以下内容：

function validateForm() {
  var acceptedFormats = ["MM-DD-YYYY", "DD-MM", "DD-MM-YYYY"],
    fromDate = moment(document.getElementsByName('fdate')[0].value, acceptedFormats),
    toDate = moment(document.getElementsByName('tdate')[0].value, acceptedFormats);

  if (fromDate.isAfter(toDate)) { // much more readable, it's practically a sentence!
    alert("To Date must be after From Date");
    return false;
  }

  return true;
}

我刚注意到的其他内容，即使日期比较过去，您的代码也始终无法提交表单。当比较失败时，您显式返回false，这会停止提交表单。但是当测试通过时你不会返回任何东西，隐含地返回undefined。将undefined传递到提交处理程序ONSUBMIT="return validateForm()"后，它将被强制转换为false，同时导致表单无法提交。

日期与javascript比较

1 个答案: