javascript - 输入 datetime-local 的 HTML 5 表单验证

标签 javascript html validation

我正在尝试使用 HTML 5 进行表单验证,如 developer.mozilla.org Data form validation (developer.mozilla.org) 中所述.我正在使用 Chrome 浏览器对其进行测试。两个问题。

  1. 当我的输入类型为 datetime-local 时,我无法使用 checkValidity() 使表单通过。 datetime-local 的输入格式非常严格(Chrome 强制采用特定格式)但它就是不通过。为什么?
  2. datetime-local 字段不应是必填字段。当用户未指定输入时,如何让它通过?

最佳答案

我在 chrome 46 和 chrome 46 beta 中遇到了这个问题,其中 “datetime” 字段必填字段(仅限用户输入格式 YYYY-MM-DDThh:mm:ssTZD PTDHMS 有两个选项,请参阅 W3C 了解值格式,参阅 MDN 了解兼容性问题。)

所以我没有用

<input type="datetime" />

或:

<input type="datetime-local" />

我用过:

<input type="text" />

Date Js解析用户输入的日期/时间

userInput = userInput || 'Thu, 1 July 2004 22:30:00';
Date.parse(userInput );

但是您可以完全跳过 Date.js 并像这样使用原生 JavaScript:来源 ( MDN )

var today = new Date();
var birthday = new Date('December 17, 1995 03:24:00');
var birthday = new Date('1995-12-17T03:24:00');
var birthday = new Date(1995, 11, 17);
var birthday = new Date(1995, 11, 17, 3, 24, 0);
var unixTimestamp = Date.now(); // in milliseconds

另请注意 <input>带有 type="datetime-local" 的元素在 Internet Explorer 或 Firefox 中不受支持(请参阅 W3C ),但您可以尝试这样做:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
<head>
<body>
<script>
  var input = document.createElement("input");
  input.setAttribute("type", "datetime-local");
  document.getElementsByTagName("body").appendChild(input);
</script>
</body>
</html>

关于javascript - 输入 datetime-local 的 HTML 5 表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34646576/

相关文章:

javascript - 无法更改 HTML 元素的可见性

javascript - 如何在验证失败时保留输入表单值 Spring MVC

c# - CompareValidator 日期格式

javascript - 如何在Vue中的组件之间共享一些代码

html - 更改排序列表背景颜色

Python:查询器验证函数

javascript - 从提交的表单中获取值

javascript - JSON forEach 获取键和值

javascript - 表单教程中的 Angular2 诊断示例

jquery - 如何向 HTML 输入字段添加不可删除的前缀?