Javascript正则表达式可验证12小时

Question

我正在尝试用Javascript构建一个12小时的输入组件，并且想实时验证格式，因为用户类型就像解析器一样会验证传入的令牌。

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

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

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

编辑：

我正在添加一些代码...

基本上，简化的输入为：

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

和值处理程序：

  onChangeTimeSchedule = (ev, scheduleKey) => {
    const validChar = /[0-9]|[aApPmM]|[\s\b]|:/;
    const validTime = /(0[1-9])|(1[0-2]):([0-5][0-9])\s((a|p|A|P)(m|M))/;
    const { value } = ev.target;
    if(!validTime.test(value))
      return;

    const { schedule } = this.state;
    schedule[scheduleKey] = {value, invalid: false};
    this.setState({schedule});
  };

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

如果在这种情况下使用validTime（这是我对每个渲染所做的检查，如果无效则添加红色边框），我将始终返回false，因为它完全匹配：10：0错误，10:00 PM正确。

Answer 1

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

^(0(?:[1-9]|$)|1(?:[0-2]|$))(?:(:)(?:([0-5])(?:([0-9])(?:(\\s)([ap]m?)?)?)?)?)?$

您可以从中得到什么：

• 如果第5组的长度== 2（am / pm），则整个时间结束。
• 组1包含部分或全部有效数据。
• 第2组包含小时。
• 组3和4包含分钟数字（连接在一起）。
• 第5组包含上午/下午。

有两种使用此正则表达式的方法。

1. 作为有效性测试。 如果不匹配，请在
   编辑框，让用户找出错误。
2. 作为自校正匹配：
   • 删除正则表达式中的最后一个$ ，允许部分匹配。
   • 每次比赛后，将组1（部分）写回到编辑框中
     因此，不允许输入无效的内容。
     等待一个提交按钮，然后验证整个字符串（从头到尾）。

格式化 /解释：

 ^                             # 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