正则报unmatched )语法错误，如何实现小时分钟输入框校验规则？

你遇到的SyntaxError: unmatched ) in regular expression报错以及校验不生效的问题，核心有4个错误点：

• 给正则字面量套了单引号，把正则实例变成了普通字符串，调用test方法会触发类型错误
• 写的regexHours末尾多了一个多余的右括号，导致正则语法不匹配
• 原正则加入了小数匹配逻辑，不符合你仅允许输入整数的需求
• 原onChange逻辑错误：RegExp.test()返回的是布尔值，你直接用这个布尔值和24、0做大小比较，校验逻辑完全不生效

1. 小时输入框实现 #

正确正则（匹配0-24的1-2位纯数字，支持0、01这类格式） #

const regexHours = /^(0?[0-9]|1[0-9]|2[0-4])$/;

组件代码 #

<SquareInput
  type="number"
  pattern="\d*"
  min="0"
  max="24"
  step="1"
  maxLength="2" // 直接限制输入最多2位
  onChange={(e) => {
    const value = e.target.value;
    // 允许空值方便用户清空重输，不需要可删除该分支
    if (value === '') {
      setHours('');
      return;
    }
    if (regexHours.test(value)) {
      const num = Number(value);
      if (num >= 0 && num <= 24) {
        setHours(value);
      }
    }
  }}
  value={hours}
/>

2. 分钟输入框实现 #

正确正则（匹配00-59的1-2位纯数字，支持前置零格式） #

const regexMinutes = /^[0-5]?[0-9]$/;

组件代码 #

<SquareInput
  type="number"
  pattern="\d*"
  min="0"
  max="59"
  step="1"
  maxLength="2"
  onChange={(e) => {
    const value = e.target.value;
    // 允许空值方便用户清空重输，不需要可删除该分支
    if (value === '') {
      setMinutesDuration('');
      return;
    }
    if (regexMinutes.test(value)) {
      const num = Number(value);
      if (num >= 0 && num <= 59) {
        setMinutesDuration(value);
      }
    }
  }}
  value={minutesDuration}
/>

内容的提问来源于stack exchange，提问作者user14749773