Bootstrap 是一個流行的前端框架，它提供了一系列預定義的樣式和組件，可以幫助開發者快速構建美觀、響應式的網頁。Bootstrap Spinner 是其中一個組件，用于顯示加載狀態。在表單驗證中，我們可以使用 Bootstrap Spinner 來向用戶展示表單正在進行驗證，而不是讓用戶感到困惑或無法理解當前的操作狀態。

以下是如何在表單驗證中應用 Bootstrap Spinner 的方法：

1. 首先，確保你已經在項目中引入了 Bootstrap 相關的 CSS 和 JavaScript 文件。

2. 在 HTML 表單中添加一個 Spinner 元素，例如：

<form id="myForm">
  <div class="form-group">
   <label for="username">用戶名</label>
   <input type="text" class="form-control" id="username" required>
  </div>
  <div class="form-group">
   <label for="password">密碼</label>
   <input type="password" class="form-control" id="password" required>
  </div>
 <button type="submit" class="btn btn-primary">提交</button>
  <div class="spinner-border text-primary d-none" id="spinner" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</form>

注意，我們為 Spinner 元素添加了 d-none 類，使其默認處于隱藏狀態。

3. 使用 JavaScript 監聽表單的提交事件，并在提交時顯示 Spinner。在表單驗證完成后，隱藏 Spinner。

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表單默認提交行為

  // 顯示 Spinner
  document.getElementById('spinner').classList.remove('d-none');

  // 表單驗證邏輯
  // ...

  // 驗證完成后，隱藏 Spinner
  document.getElementById('spinner').classList.add('d-none');
});

這樣，在用戶提交表單時，Bootstrap Spinner 將會顯示出來，向用戶展示表單正在進行驗證。驗證完成后，Spinner 會自動隱藏。這種方法可以提高用戶體驗，讓用戶更清楚地了解當前的操作狀態。