用于验证12小时时间的Javascript正则表达式

我正在尝试用Javascript构建一个12小时的输入组件，我希望在用户输入时实时验证格式，就像解析器验证传入的令牌一样

我使用的是react，因此在每次渲染中，字段值通过以下正则表达式传递：

const validTime = /(0[1-9])|(1[0-2]):([0-5][0-9])\s((a|p|A|P)(m|M))/;

我测试该值是否有效，如果无效，我会在输入中添加一个红色边框，但通过这种方法，我可以编写任何内容，它不会被提交，但您可以编写类似AJSJsdf的内容，我正在寻找不同的内容。允许用户仅实时键入上述正则表达式规则允许的字符

编辑：

我正在添加一些代码

基本上，简化的输入是：

<input
  ref={(input) => {this[keyName] = input}}
  className="form-control"
  placeholder="09:00 AM"
  value={scheduleTime ? scheduleTime.value : ''}
  onChange={(ev) => this.onChangeTimeSchedule(ev, keyName)}/>

如果我使用validChar，它将只允许我想要的字符，但它将允许像10:aaaM这样的字符串

---

如果我使用validTime，这是我对每个渲染所做的检查，如果在此上下文中无效，要添加红色边框，我总是返回false，因为它不包含完全匹配：10:0是错误的，10:00 PM是正确的。

这是一种方法。将其设置为不区分大小写

^0:[1-9]|$| 1:[0-2]|$.：[0-5]？：[0-9]：\s[ap]m

您可以从中获得什么：

如果第5组长度=2 am/pm，则整个时间结束。 组1包含部分或全部有效数据。 第2组包含小时数。 第3组和第4组包含连接在一起的分钟数字。 第5组包含am/pm。 有两种方法可以使用这个正则表达式

作为有效性的测试。如果不匹配，则在屏幕周围放置一个红色框 编辑框，让用户找出错误。 作为自校正匹配： 去掉正则表达式中的最后一个$，允许部分匹配。 每次匹配后，将组1部分写回编辑框 因此不允许无效条目。 等待submit按钮，然后从开始到结束验证整个字符串。 /解释：

 ^                             # BOS
 (                             # (1 start)
      # Hours
      (                             # (2 start)
           0 
           (?: [1-9] | $ )
        |  1 
           (?: [0-2] | $ )
      )                             # (2 end)


      # Minutes
      (?:
           :                             # ':'
           (?:

                ( [0-5] )                     # (3), Min,digit 1
                (?:
                     ( [0-9] )                     # (4), Min,digit 2
                     (?:
                          \s                            # space
                          (                             # (5 start), AM / PM
                               [ap] m?
                          )?                            # (5 end)
                     )?
                )?

           )?
      )?
 )                             # (1 end)
 $                             # EOS

---

请邮寄一份样品input@PedroLobito用一些代码更新了我的问题。我觉得可能存在一种更简单的方法，但是如果您根据文本的长度执行if语句呢。由于时间是如此结构化，如果键入的第一个字母不是0或1，则在输入的左侧追加一个0。如果长度为2，则追加a：如果长度为5，则追加一个空格。然后根据输入的长度进行验证。如果字符类型对于该长度无效，请删除该字符。如果该字符有效，我将进一步使用它。谢谢：你能给我解释一下“？：”的用法吗。。群集组是否为非捕获，这是？：。。？使其内容可选。

 ^                             # BOS
 (                             # (1 start)
      # Hours
      (                             # (2 start)
           0 
           (?: [1-9] | $ )
        |  1 
           (?: [0-2] | $ )
      )                             # (2 end)


      # Minutes
      (?:
           :                             # ':'
           (?:

                ( [0-5] )                     # (3), Min,digit 1
                (?:
                     ( [0-9] )                     # (4), Min,digit 2
                     (?:
                          \s                            # space
                          (                             # (5 start), AM / PM
                               [ap] m?
                          )?                            # (5 end)
                     )?
                )?

           )?
      )?
 )                             # (1 end)
 $                             # EOS