JAVASCRIPT验证表单中的日期

JAVASCRIPT validate date in the form

本文关键字：日期 表单 验证 JAVASCRIPT      更新时间：2023-09-26

我尝试使用javascript来验证输入的日期是否正确。例如，对于ETA（估计到达时间），日期应早于ETD（估计离开时间）。

这是形式：

   <form>
      <label>ETA</label>
             <input  id="etadate" name="etadate" type="date" />
             <input name="etatime" type="time"/> 
      <label>ETD</label>
             <input  id="etddate" name="etddate" type="date"/>
             <input name="etddime" type="time"/>                                                                                        
   </form>

对于javascript:

function validate1
 {
       var x = document.getElementById("etadate");
       var y = document.getElementById("etddate");
       if (x < y)
       {
          true;
       }
       else
       {
          false;
       }
}

当我尝试运行代码时，它没有通知用户eta的日期应该早于etd。我不知道在哪里调整，这样代码才能正确运行。

有几个问题：

var x = document.getElementById("etadate");

将返回对作为对象的输入元素的引用。不应该使用<操作人员您需要：

var x = document.getElementById("etadate").value;

因此x现在是一个字符串。

在支持输入类型日期的情况下，浏览器应该成功地将字符串解析为日期，所以您可以这样做：

var x = new Date(document.getElementById("etadate").value);

然而，在一些浏览器中，返回的字符串是一个ISO 8601格式的字符串，如2016-05-23，它将被解析为UTC，因此对于GMT以西的浏览器，它将看起来提前一天。你需要处理这个问题。

还有一些浏览器不支持输入类型日期，SO对此有疑问。

无论如何，你需要：

  1. 获取每个输入的值
  2. 检查他们是否生成了有效的日期
  3. 如果他们这样做了，请比较日期，这样可以：

function validate1 (form) {
  var x = new Date(form.etadate.value);
  var y = new Date(form.etddate.value);
  if (isNaN(+x) || isNaN(+y)) {
     alert("One of the dates is invalid");
     return false;
  }
  
  if (x < y) {
    alert('ETA is before ETD');
  } else {
    alert('ETD is before ETA');
  }
}
<form onsubmit="validate1(this); return false;">
  <label>ETA</label>
             <input  id="etadate" name="etadate" type="date">
             <input name="etatime" type="time"/> 
  <label>ETD</label>
             <input  id="etddate" name="etddate" type="date">
             <input name="etdtime" type="time">
  <button>submit</button>
</form>

我用return false阻止了提交，函数和监听器自然应该根据比较结果返回true或false。

此外，OP中的函数声明没有参数列表，因此语法无效（在上面已经修复）。

这样使用-

function validate1
{
   var x = new Date(document.getElementById("etadate").value);
   var y = new Date(document.getElementById("etddate").value);
   return x<y;
}
相关文章：