剑道UI剑道屏蔽文本框24小时

Question

我正在尝试创建屏蔽文本框，您可以在其中最多键入24:00，但我不能使正则表达式相互依赖。现在我可以输入前25点了。如果第一个字符是2，我只需要能够键入<5.有人能帮忙吗？

$(".hoursBox").kendoMaskedTextBox({
    mask: "12:34",
    rules: {
        "1": /[0-2]/,
        "2": /[0-9]/,
        "3": /[0-5]/,
        "4": /[0-9]/
   }
});

Answer 1

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

((?!00)[0-1][0-9]|2[1-4]):[0-5][0-9]

如何工作

1. 第一个数字应该是CCD_ 1中的任何一个
2. 第二个数字应该是[0-9]中的任何数字
3. 但是第一位和第二位不能是"00"，所以我们可以使用负前瞻来测试这个(?!00)
4. 第三个字符应该是冒号（:）
5. 第四个字符应该是[0-5]中的任何一个
6. 第五个字符应该是[0-9]中的任何一个

你可以在这里看到它是如何匹配的。

Answer 2

我做到了。

<kendo-maskedtextbox
              [includeLiterals]="true"
              [formControl]="formGroup.get('duration')"
              mask="000d12h34m"
              [rules]="rules"
              (keydown)="onKey(formGroup.get('duration'))"
            >
            </kendo-maskedtextbox>

 public rules = {
    '1': /[0-2]/,
    '2': /[0-9]/,
    '3': /[0-5]/,
    '4': /[0-9]/,
  };
  public onKey(fg: FormControl) {
    setTimeout(() => {
      // check for hours > 23
      if (Number(fg.value?.split('d')[1].substring(0, 2)) > 23) {
        const value = fg.value.substring(0, 5) + ` ` + fg.value.substring(6);
        fg.setValue(value);
      }
    }, 200);
  }