How can a form in Vue Js be validated to accept decimal numbers?

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"
    />
  </head>

<body>
    <div id="app">
      <h3>Vue Js form Input field validated to accept decimal numbers</h3>
      <form @submit="submitForm">
        <label for="decimalInput">Decimal Number:</label>
        <input
          type="text"
          id="decimalInput"
          v-model="decimalValue"
          :class="{ 'is-invalid': errors.decimalInput }"
        />
        <div v-if="errors.decimalInput" class="error">
          {{ errors.decimalInput }}
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>

// Validate decimal input
            if (!this.decimalValue) {
              this.errors.decimalInput = "Decimal number is required.";
            } else if (!/^\d+(\.\d+)?$/.test(this.decimalValue)) {
              this.errors.decimalInput = "Invalid decimal number.";
            } else {
              // Decimal number is valid, submit the form or perform other actions
              console.log("Decimal number:", this.decimalValue);
              // Submit form or perform other actions here
            }
          },
        },
      });

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

/* Form styles */
      form {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

/* Label styles */
      label {
        font-size: 18px;
        margin-bottom: 10px;
      }

/* Input styles */
      input[type="text"] {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 200px;
      }

/* Invalid input styles */
      input.is-invalid {
        border-color: #ff0000;
      }

/* Error message styles */
      .error {
        color: #ff0000;
        font-size: 14px;
        margin-top: 5px;
      }

/* Button styles */
      button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #4caf50;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
      }

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