Question

我试图创建蒙面文本框，您可以在最长24:00输入，但我无法使正则表达式相互依赖。现在我可以输入ex。 25:00。如果第一个字符是2，我只需要输入＆lt; 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]

工作原理

第一个数字应该是[0-1]。
第二个数字应该来自[0-9]。
但第一位和第二位数字不能为'00'，因此我们可以使用否定前瞻来测试此(?!00)。
第三个字符应为冒号（:）。
第四个字符应为[0-5]中的任何一个。
第五个字符应为[0-9]中的任何一个。

您可以看到它与here的匹配方式。

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);
  }

Kendo UI kendoMaskedTextBox 24小时制

2 个答案: