javascript - 防止输入无效日期的 AngularJS 指令

Question

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

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

尝试 1

将函数绑定(bind)到按键/按键事件。

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

尝试 2

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

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

帮助

有没有什么办法可以在他们输入日期时(而不是在事后)验证日期，而不会发生奇怪的事情？

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

Answer 1

在反复尝试之后，我能够想出一个令我满意的解决方案。我想我会分享以防万一有人好奇:

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

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

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

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