javascript - 如何使用 HTML5 验证日期范围？

Question

或者，是否可以使用 html5 验证另一个字段的值？

一个常见的例子是选择一个日期范围，其中“开始”日期应小于或等于“结束”日期。下面将描述值之间的所需关系，前提是您可以在语法中使用元素引用：

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

score 3 · Accepted Answer

可以使用带有一些 javascript 的 html5 验证机制来动态更新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可以应用于增强用户体验的各个字段

score 3 · Accepted Answer

在这里，Web 组件非常有用，但还不是所有浏览器都完全支持它们。

这个想法是创建一个简单的 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/

优点：

构建为小部件
易于重复使用
不会断页
可以独立设计

缺点：

尚不支持所有浏览器

未来阅读：

score 0 · Accepted Answer

很高兴看到事情朝着纯 HTML 解决方案发展……但为什么不暂时看看使用 moment.js 来填补空白呢？

http://momentjs.com/

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

score 0 · Accepted Answer

如果您想避免有人入侵/使您的网站崩溃，请使用以下方法验证输入数据：

（可选）发送表单之前的 javascript（防止使用 javascript 的畸形数据，输入不正确的数据，减少流量）
（强制）在服务器端（例如，防止更聪明的人可能使用提琴手错误地输入数据）

这是保护您和您的网站的唯一（至少是第二点）方法。

score -1 · Accepted Answer

我担心，没有机会如何根据其他输入值验证输入值。只有好的旧javascript。

但也许您可以使用<input type="range" …>并设置一些最小的步骤（1 天/1 小时/...）。然后，您可以通过同名属性来使用min和赋值。max

javascript - 如何使用 HTML5 验证日期范围？

5 回答 5

Related

Reference