Question

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

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

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

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

编辑：

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

基本上简化的输入是：

<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（上午/下午），整个时间结束。
第1组包含部分或完整有效数据。
第2组包含小时数。
第3组和第4组包含分钟数字（连接在一起）。
第5组包含am / pm。

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

作为有效性的测试。如果不匹配，请在左边放一个红色框编辑框，让用户找出错误。
作为自我纠正比赛：
- 取消正则表达式中的最后一个$，允许部分匹配。
- 每次比赛后，将组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

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

1 个答案: