如何使用HTML5驗證日期范圍？

Question

或者， 是否可以使用html5驗證另一個字段的值？

一個常見的例子是選擇日期范圍，其中“from”日期應小於或等於“to”日期。 以下將描述值之間的期望關系，如果只有您可以在語法中使用元素引用：

<input type="date" name="from" max="to">    //todo: populate with ~to.value
<input type="date" name="to" min="from">    //todo: populate with ~from.value

Answer 1

這里， Web Components非常有用，但尚未在所有瀏覽器中完全支持它們。

我們的想法是創建一個簡單的html元素，其中包含兩個子元素（from和to），如下所示：

<div id="fromToDate">
    <div></div>
    <div></div>
</div>

然后創建一個模板，定義日期選擇器的外觀：

<template id="fromToDateTemplate">
    <label for="fromDate">from</label>
    <input type="date" class="fromDate" select=":first" required="" />
    <label for="toDate">to</label>
    <input type="date" class="toDate" select=":last" required="" />
</template>

select參數定義，其中取值為，因此第一個輸入字段從“#fromToDate”獲取第一個div。

最后我們必須填充“影子根”並定義邏輯：

var shadow = document.querySelector('#fromToDate').webkitCreateShadowRoot(),
    template = document.querySelector('#fromToDateTemplate');
shadow.appendChild(template.content);


shadow.querySelector(".fromDate").addEventListener("change", function (e) {
    var to = this.value;

    shadow.querySelector(".toDate").setAttribute("min", this.value);
});

template.remove();

最后，兩個輸入字段被渲染，當在第一個日期選擇器中選擇日期時，第二個日期選擇器不能選擇任何較低的數據。

提琴手示例： http ： //jsfiddle.net/cMS9A/

好處：

• 構建為小部件
• 容易重生
• 不會打破頁面
• 可以獨立設計

缺點：

• 尚未在所有瀏覽器中支持

未來閱讀：

• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
• https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html

Answer 2

可以利用html5驗證機制和一些javascript來動態更新min / max屬性：

//in this case a single input restriction is sufficient to validate the form:

$('#from, #to').on('change', function(){
    $('#to').attr('min', $('#from').val());
});

擺弄 。 如果日期選擇器的瀏覽器實現遵循范圍限制（通過禁用所需范圍之外的日期），則min和max都可以應用於相應字段以增強UX

Answer 3

如果你想避免某人黑客攻擊/崩潰網站的問題 - 用以下方法驗證輸入數據：

• （ 可選 ）發送表單之前的javascript（使用javascript防止錯誤數據，輸入錯誤數據，減少流量）
• （ 強制性的 ）在服務器端（例如，防止可能使用fiddler使輸入數據格式錯誤的更聰明的人）

這是保護您和您的網站的唯一（至少第二點）方法。

Answer 4

很高興看到事情朝着純粹的HTML解決方案發展......但為什么不考慮使用moment.js暫時填補空白呢？

http://momentjs.com/

那里有很多很好的例子和很多有用的實用方法。

Answer 5

我很擔心，如何根據其他輸入值驗證輸入值是不可能的。 只有好老的javascript。

但也許您可以使用<input type="range" …>並設置一些最小步驟（1天/ 1小時/ ...）。 然后，您可以使用同名屬性的min和max 。