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

经过更多的尝试后，我找到了一个令我满意的解决方案。如果有人好奇的话我想我会分享：

普朗克： http://embed.plnkr.co/gE1WXaXsYI7zpWPkmvVS/preview

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

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

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