regex - 剑道 UI kendoMaskedTextBox 24 小时制

Question

我正在尝试创建蒙面文本框，您可以在其中输入最多 24:00，但我不能使正则表达式相互依赖。现在我可以输入 ex。25:00。如果第一个字符是 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. 第一个数字应该是任何一个[0-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);
  }