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

Question

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

3

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

- Diogenes

1

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

4个回答

1

你可以使用正则表达式来验证提供的输入是否为有效的日期格式。

你可以使用以下正则表达式：

/^\d{2}\/\d{2}\/\d{4}$/

在答案中提到了验证日期时间格式(MM/DD/YYYY)的正则表达式

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

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

- Omkar

这只是展示如何验证日期值的方法，问题在于当输入的日期由于HTML规范而无效时，该值被设置为空字符串''（有关详细信息，请参阅已接受的答案）。 - hcpl

1

让我们看一下以下代码：

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

如果日期无效，那么以下语句将返回 true：

date == 'Invalid Date'

- sojin

0

虽然它不会明确告诉您日期字段是“不完整的”，但对于这样的要求，一个有用的属性是input.validity

如何获取不完整的datetime-local输入值

有一个有用的属性input.validity，它将为您提供badInput customError patternMismatch rangeOverflow rangeUnderflow stepMismatch tooLong typeMismatch valid

https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

- Hunter Phillips

这很可能是与用户代理有关的。Safari（15.6，尚未测试较新版本）将在部分填充日期的ValidityState上愉快地向您提供valid: true。 - Jeremy Frey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wing · Accepted Answer

太长不看：不，原生不支持

问题

这是因为本地的HTML日期输入必须要么为空，要么符合规范的有效日期：

4.10.5.1.7 日期状态（类型=日期） [...]用户代理不能允许用户将value设置为非空字符串，且非有效日期字符串。[...] 如果指定且非空，则value属性必须具有有效日期字符串的值。 value消毒算法如下：如果元素的value不是有效日期字符串，则将其设置为空字符串。

– reference

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

解决方案

检查输入的有效状态

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

初始值（无输入）

部分值（例如 01/mm/yyyy）

Chrome
(已测试版本：116.0.5845.140)

{
  value: "",
  validity: {
    badInput: false,
    valid: true
  }
}

{
  value: "",
  validity: {
    badInput: true,
    valid: false
  }
}

Firefox
(已测试版本：116.0.2)

{
  value: "",
  validity: {
    badInput: false,
    valid: true
  }
}

{
  value: "",
  validity: {
    badInput: true,
    valid: false
  }
}

Safari
(已测试版本：16.6)

{
  value: "",
  validity: {
    badInput: false,
    valid: true
  }
}

{
  value: "",
  validity: {
    badInput: false,
    valid: true
  }
}

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

const input = document.getElementById("input");

function log({ type, target: { validity, value, }}) {
  console.log({ type, validity, value });
}

log({ type: "load", target: input });

input.addEventListener("blur", log);

input.addEventListener("change", log);

<input id="input" type="date" />

构建自定义日期输入框

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