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

Posted 2023-02-22

【中文标题】有没有办法以编程方式确定输入日期字段是不是不完整？

【英文标题】：Is there a way to programmatically determine if an input date field is incomplete?有没有办法以编程方式确定输入日期字段是否不完整？

【发布时间】：2021-11-13 13:26:26

【问题描述】：

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

提前致谢！

【问题讨论】：

感谢所有回答的人。我将尝试构建自定义日期输入。祝你有美好的一天！ :)

【参考方案1】：

在这种情况下，您可以使用正则表达式来验证所提供的输入是否是有效的日期格式。

您可以使用以下正则表达式

/^\d2\/\d2\/\d4$/ 

答案中提到regular expression to validate datetime format (MM/DD/YYYY)

您可以在 JS 中使用 (str).match(regex) 来使用此功能。

我分享了一种使用方法，正则表达式可以根据用例进行更新。

【参考方案2】：

让 date = new Date('12/09/aaaa');

date == 'Invalid Date' //这将在日期无效时返回true

【参考方案3】：

tl;dr：不，不是本机

问题

如果您使用原生 html 日期输入，则无法区分部分填充状态和完全空状态，因为根据规范，原生 HTML 日期输入必须为空或具有有效日期：

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

[...] 用户代理不得允许用户将value 设置为不是valid date string 的非空字符串。 [...]

value 属性如果已指定且不为空，则其值必须为 valid date string。

value sanitization algorithm如下：如果元素的value不是valid date string，则改为空字符串。

——reference

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

解决方案

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