如何使用 HTML 验证日期范围

How to use HTML to validate a date range?

本文关键字：日期 范围 验证 HTML 何使用      更新时间：2023-09-26

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

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

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

可以使用 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 应用于各自的字段以增强用户体验

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

这个想法是创建一个简单的html元素，有两个子元素(从和到(，如下所示：

<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

如果您想避免有人入侵/崩溃您的网站的问题 - 通过以下方式验证输入数据：

    (
  • 可选(发送表单前的JavaScript(防止使用JavaScript格式的数据，输入不正确的数据，减少流量(
  • (强制性(在服务器端(防止更聪明的人可能使用提琴手使输入数据变形(

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

很高兴

看到事情朝着纯HTML解决方案的方向发展......但为什么不看看利用时刻.js暂时填补空白呢？

http://momentjs.com/

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

我很担心，没有机会如何根据其他输入值验证输入值。只有好的老式JavaScript。

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

相关文章：