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