有没有办法以编程方式确定输入日期字段是否不完整？

Question

我遇到了以下问题：如何确定输入日期字段是否提交不完整？例如，如果我12/09/aaaa作为值发送，则实际发送的值是null，这与我发送时获得的值相同gg/mm/aaaa，即空值。有没有办法通过JS区分这两种情况？（实际上，我正在使用 Vue.js，但我认为这并不是那么重要。）

Answer 1

tl;dr: 不，不是天生的

\n

问题

\n

发生这种情况是因为本机 HTML 日期输入必须为空或根据规范具有有效日期：

\n

\n

4.10.5.1.7 日期状态（类型=日期）

\n

[...] 用户代理不得允许用户将该值设置为不是有效日期字符串的非空字符串。[...]

\n

该value属性（如果指定且不为空）的值必须是有效的日期字符串。

\n

值清理算法如下：如果元素的值不是有效的日期字符串，则将其设置为空字符串。

\n

\n

\xe2\x80\x93参考

\n

这意味着，当输入部分填充时，无论触发什么表单或输入事件（submit、change等），输入的值都将为空字符串。

\n

解决方案

\n

检查输入的有效性状态

\n

输入元素有一个名为validity描述输入值的有效性状态的属性。理论上，您可以检查输入的有效性状态对象的badInput或属性；valid如果存在badInput: true或valid: false且该值为空字符串，则可以推断输入已部分完成。然而，实际上，Safari 似乎会返回badInput: false，valid: true甚至输入了部分填充的日期。见下表：

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n

	初始（无输入）	部分（例如 01/mm/yyyy）
Chrome （在 116.0.5845.140 上测试）	{ \xc2\xa0\xc2\xa0值:\xc2\xa0"", \xc2\xa0\xc2\xa0有效性:\xc2\xa0{ \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0bad输入:\xc2 \xa0false, \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0valid:\xc2\xa0true \xc2\xa0\xc2\xa0} }\xc2\xa0	{ \xc2\xa0\xc2\xa0值:\xc2\xa0"", \xc2\xa0\xc2\xa0有效性:\xc2\xa0{ \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0bad输入:\xc2 \xa0true, \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0valid:\xc2\xa0false \xc2\xa0\xc2\xa0} }\xc2\xa0
Firefox （在116.0.2上测试）	{ \xc2\xa0\xc2\xa0值:\xc2\xa0"", \xc2\xa0\xc2\xa0有效性:\xc2\xa0{ \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0bad输入:\xc2 \xa0false, \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0valid:\xc2\xa0true \xc2\xa0\xc2\xa0} }\xc2\xa0	{ \xc2\xa0\xc2\xa0值:\xc2\xa0"", \xc2\xa0\xc2\xa0有效性:\xc2\xa0{ \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0bad输入:\xc2 \xa0true, \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0valid:\xc2\xa0false \xc2\xa0\xc2\xa0} }\xc2\xa0
Safari （在16.6上测试）	{ \xc2\xa0\xc2\xa0值:\xc2\xa0"", \xc2\xa0\xc2\xa0有效性:\xc2\xa0{ \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0bad输入:\xc2 \xa0false, \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0valid:\xc2\xa0true \xc2\xa0\xc2\xa0} }\xc2\xa0	{ \xc2\xa0\xc2\xa0值:\xc2\xa0"", \xc2\xa0\xc2\xa0有效性:\xc2\xa0{ \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0bad输入:\xc2 \xa0false, \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0valid:\xc2\xa0true \xc2\xa0\xc2\xa0} }\xc2\xa0

\n

\n

该测试可以使用下面的代码片段运行：

\n

\r\n

\r\n

{
\xc2\xa0\xc2\xa0value:\xc2\xa0"",
\xc2\xa0\xc2\xa0validity:\xc2\xa0{
\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0badInput:\xc2\xa0false,
\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0valid:\xc2\xa0true
\xc2\xa0\xc2\xa0}
}\xc2\xa0

\r\n

{
\xc2\xa0\xc2\xa0value:\xc2\xa0"",
\xc2\xa0\xc2\xa0validity:\xc2\xa0{
\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0badInput:\xc2\xa0true,
\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0valid:\xc2\xa0false
\xc2\xa0\xc2\xa0}
}\xc2\xa0

\r\n

\r\n

\r\n

\n

构建您自己的自定义日期输入

\n

因此，我认为建议构建您自己的自定义输入（或使用库）。这将使您能够完全一致地控制部分输入的返回和验证方式。

\n