用於驗證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