JAVASCRIPT在表單中驗證日期

Question

我試圖用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。 我不知道在哪里調整，所以代碼運行正常。

Answer 1

像這樣使用 -

function validate1
{
   var x = new Date(document.getElementById("etadate").value);
   var y = new Date(document.getElementById("etddate").value);

   return x<y;
}

Answer 2

有幾個問題：

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

將返回對input元素的引用，該元素是一個對象。 不應使用<運算符比較對象。 你需要：

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

所以x現在是一個字符串。

在支持輸入類型日期的情況下，瀏覽器應該成功地將字符串解析為日期，因此您可以執行以下操作：

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

但是，在某些瀏覽器中，返回的字符串是ISO 8601格式的字符串，如2016-05-23，它將被解析為UTC，因此對於GMT以西的人來說，它似乎是提前一天。 你需要處理這個問題。

然后有些瀏覽器不支持輸入類型日期，有關於此的問題。

無論如何，你需要：

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中的函數聲明沒有參數列表，因此語法無效（在上面已修復）。