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

Question

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

我使用的反应，所以在每个渲染的字段值被传递trhough以下的正则表达式：

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

我测试，如果该值有效，如果我不能添加红色边框的输入，但是通过这种方法，我可以写任何东西，它不会被提交，但你可以写如ajsjjsdf，我正在寻找不同的东西。允许用户实时输入上述正则表达式规则允许的字符。

编辑：

我加入一些代码...

基本上simpliefied输入为：

<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组包含am/pm。

有2种方法可以使用这个正则表达式。

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

Formatted /解释：

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