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

hug*_*gie 9 javascript validation html5

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

  1. checkValidity()当我有一个输入类型时,我无法使表单传递datetime-local.datetime-local的输入格式非常严格(Chrome强制它以某种格式)但它只是没有通过.为什么?
  2. datetime-local字段不应是必填字段.当用户未指定输入时,如何通过?

小智 1

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

所以我没有使用

<input type="datetime" />
Run Code Online (Sandbox Code Playgroud)

或者:

<input type="datetime-local" />
Run Code Online (Sandbox Code Playgroud)

我用了:

<input type="text" />
Run Code Online (Sandbox Code Playgroud)

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

userInput = userInput || 'Thu, 1 July 2004 22:30:00';
Date.parse(userInput );
Run Code Online (Sandbox Code Playgroud)

但是您可以完全跳过 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
Run Code Online (Sandbox Code Playgroud)

另请注意,Internet Explorer 或 Firefox 不支持 的<input>元素(请参阅W3C),但您可以尝试以下操作:type="datetime-local"

<!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>
Run Code Online (Sandbox Code Playgroud)