如何使用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 。