To validate time in 12-hour format using Vue.js, you can use a regular expression pattern that matches the format “hh:mm am/pm”. This pattern checks that the hours are in the range of 1 to 12, the minutes are in the range of 00 to 59, and that the “am” or “pm” suffix is present.In this tutorial we will learn how to validate time 12 hours format using Vue Js and native Javascript.

Regular expression to match the time format – Javascript Example

 const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])\s?(am|pm)$/i;

Explanation:

• ^ : start of the string
• (0?[1-9]|1[0-2]) : match either a single digit from 1 to 9 (optionally preceded by a 0), or the number 10, 11, or 12
• : : match a colon
• [0-5][0-9] : match a number between 00 and 59
• \s : match a whitespace character (space, tab, newline)
• (am|pm) : match either “am” or “pm”
• $ : end of the string

Examples:

• 10:30 am – valid
• 5:45 pm – valid
• 12:00 am – valid
• 7:30 AM – invalid (case sensitive)
• 13:15 pm – invalid (hour must be between 1-12)
• 09:30 am – invalid (leading zero not allowed for hour)

How to Vue Js validate time in 12-hour format using Regular Expression

1. Define a method called validateTime as part of the Vue.js methods object.
2. Create a regular expression using the RegExp constructor to match the time format.
   • The regular expression uses the ^ and $ symbols to match the start and end of the string, respectively.
   • The regular expression uses the | symbol to indicate alternative options for the hour component:
     • (0?[1-9]) matches a single digit 1-9 or a zero followed by a single digit 1-9.
     • (1[0-2]) matches the number 10, 11, or 12.
   • The regular expression uses : to match the colon between the hour and minute components.
   • The regular expression uses [0-5][0-9] to match any two digits between 00 and 59.
   • The regular expression uses \s? to match an optional space character.
   • The regular expression uses (am|pm) to match the AM or PM indicator, case-insensitively.
3. Check if the time data property of the  Vue instance matches the regular expression using the match() method.
4. If the time data property does not match the regular expression, set the invalidTime data property to true.
5. If the time data property matches the regular expression, set the invalidTime data property to false.
6. The invalidTime data property is likely being used in the template to conditionally render an error message or style the input element.

Vue Js Validate Time 12 hours Format Example

<div id="app">
    <div>
      <label>Enter a time (12-hour format):</label><br>
      <input type="text" v-model="time" @input="validateTime">
    </div>
    <pre v-if="invalidTime" style="color:red">Please enter a valid time (12-hour format)</pre>
</div>
 <script type="module">
    import { createApp } from "vue";
    createApp({
      data() {
        return {
          time: '',
          invalidTime: false
        }
      },
      methods: {
        validateTime() {
          // regular expression to match the time format
          const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])\s?(am|pm)$/i;

          if (!this.time.match(timeRegex)) {
            this.invalidTime = true;
          } else {
            this.invalidTime = false;
          }
        }
      }
    }).mount("#app");
 </script>

Output of Vue Js Validate Time 12 Hours format