AngularJS 指令防止输入无效日期

Question

我想要的是让用户只输入一个有效的日期，但是我无法找到一个好的方法来完成它。

日期格式需要是“MM/DD/YYYY”，所以我在输入上有一个掩码为“99/99/9999”。虽然这会强制用户只输入数字并自动按照我需要的方式对其进行格式化，但问题是这允许用户输入诸如“53/49/6540”之类的内容，这是一个无效的日期。

尝试 1

将函数绑定到 keypress/keydown 事件。

• 我有一个正则表达式，可以在输入日期时验证日期（例如，它允许月份为“12”，但不允许月份为“13”）。
• 一切看起来都不错..但是...在您编辑时开始显示一些奇怪的结果
  • 假设输入是“10/21/1999”
  • 他们想将月份更改为“12”。
  • 所以他们将光标放在“0”之后并按退格键，
  • 值现在是“12/11/999”并且无效，阻止输入
  • 或者，他们只是突出显示“0”并意外点击“3”而不是“2”，它将通过，变为“13/21/1999”然后无效，阻止进一步输入

尝试 2

将函数绑定到 keyup/changed 事件。

• 我获取旧值、新值并对其进行验证，如果无效则恢复为旧值
• 这会造成一种奇怪的用户体验，因为他们会看到自己输入的内容被删除和退回，我一点也不喜欢
• 如果无效，不会让用户退格，因为它会还原它
• 如果输入速度足够快，仍然允许无效数据通过

帮助

有什么方法可以在他们键入日期时（而不是事后）验证日期，而不会发生奇怪的事情？

Plunkr 显示问题： http://embed.plnkr.co/0qbiiiRnIo9SuJ5xNe30/preview

Answer 1

在玩了更多之后，我能够想出一个我满意的解决方案。如果有人好奇，我想我会分享：

Plunkr： http://embed.plnkr.co/gE1WXaXsYI7zpWPkmvVS/preview

基本上，我偶然发现了一个元素的“selectionStart”和“selectionEnd”属性，它允许您在按键上获取新值插入位置的索引。因此，可以说，通过获取旧值并将键入的字符插入正确的位置，对其进行验证，并防止按键无效，从而获得“新值”。

我做的另一件不同的事情是去掉掩码插入的所有斜杠和空格（_ _ / _ _ / _ _ _ _）并将我的正则表达式更改为仅基于数字进行验证（例如“12121900”），这允许用户在任何时候退格/插入字符，而不会出现奇怪的“123/19/90”类型的变体。

它并不完全完美，但至少更好。

Answer 2

您可以稍微修改您的第一种方法。你说你正在绑定 keyup/down 事件然后验证输入，所以不要拦截退格键事件（键码 8），即当用户按下退格键时不要验证输入。

现在您还可以添加大约 3 秒的超时，如果用户不修改输入，那么您可以验证您的输入并告诉用户日期。