HTML5日期字段测试



即使格式是dd/mm/yyyy,我也可以在一年中插入4个以上的字符。我不知道如何制止这种行为。

<html>
<head>
<title>input test data insert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="date" data-date-format="dd/mm/yyyy">
</body>
</html>

添加一个max属性并将其设置为max="9999-12-31"

<html>
<head>
<title>input test data insert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
</body>
</html>

您可以在输入中指定允许的max日期(请记住,10000AD是一个真实的年份,即使它还有很长的路要走(,但只有在提交表单时才会检查它。

<form>
<input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
<button>Submit</button>
</form>

当值发生变化时,您可以添加JS来检查它,但您需要提供自己的UI来显示错误。

document.querySelector('input').addEventListener('change', event => {
if (!event.target.checkValidity()) alert("Error")
});
<form>
<input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
<button>Submit</button>
</form>

最新更新