Vue Js Credit Card Expiry Date Validation

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Credit Card Expiry Date Validation</h3>
    <input type="text" v-model="expiryDate" @input="formatExpiryDate" placeholder="Expiry Date (MM/YY)" :maxlength="5">
    <div class="error-message" :class="{ 'success-message': showSuccess }"
      v-if="showError || showSuccess || showEmptyError">
      {{ showError ? errorMessage : (showEmptyError ? 'Input field required' : successMessage) }}
    </div>

<button @click="validateExpiryDate">validate</button>
  </div>

methods: {
        formatExpiryDate() {
          // Remove any non-digit characters
          let formattedDate = this.expiryDate.replace(/\D/g, '');

// Add a slash (/) between month and year
          if (formattedDate.length > 2) {
            formattedDate = formattedDate.slice(0, 2) + '/' + formattedDate.slice(2);
          }

this.expiryDate = formattedDate;
        },
        validateExpiryDate() {
          const currentYear = new Date().getFullYear() % 100;
          const currentMonth = new Date().getMonth() + 1;

if (this.expiryDate === '') {
            // Input field is empty, display the empty error message
            this.showError = false;
            this.showSuccess = false;
            this.showEmptyError = true;
            this.errorMessage = 'Input field required';
          } else {
            const enteredYear = parseInt(this.expiryDate.slice(3), 10);
            const enteredMonth = parseInt(this.expiryDate.slice(0, 2), 10);

if (
              enteredYear < currentYear ||
              (enteredYear === currentYear && enteredMonth < currentMonth) ||
              enteredMonth < 1 ||
              enteredMonth > 12
            ) {
              this.showError = true;
              this.showSuccess = false;
              this.showEmptyError = false;
              this.errorMessage = 'Invalid expiry date';
            } else {
              this.showError = false;
              this.showSuccess = true;
              this.showEmptyError = false;
              this.successMessage = 'Valid expiry date';
            }
          }
        }

}
    });

app.mount('#app');
  </script>

h3 {
      font-size: 20px;
      margin-bottom: 10px;
    }

input[type="text"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 120px;
      box-sizing: border-box;
      outline-color: lightblue;
    }

h3 {
      margin-bottom: 20px;
    }

input[type="text"] {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }

.error-message {
      color: #e74c3c;
      font-size: 14px;
      margin-bottom: 10px;
    }

.success-message {
      color: #2ecc71;
    }

button {
      background-color: #4caf50;
      color: white;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

button:hover {
      background-color: #45a049;
    }
  </style>
</body>

</html>