Vue Js Validate Time 12 Hours format

<html>
<head>
  <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Validate Time 12 hours format using Regular Expression </h3>
    <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>
</body>
</html>