在現代 Web 應用中，表單驗證是一個非常常見且重要的需求，它確保用戶輸入的數據符合預期並能夠被系統正確處理。在 Vue 3 中，除了依賴現成的第三方表單驗證庫（如 VeeValidate 和 vuelidate）之外，開發者也可以根據具體需求自行實現靈活的自定義表單驗證邏輯。

今天將介紹如何在 Vue 3 中實現自定義表單驗證，並且探討一些最佳實踐和常見的應用場景。

Vue 3 中的表單驗證基本思路

在 Vue 3 中，自定義表單驗證可以通過使用 Vue 的響應式數據、v-model 指令和事件處理來實現。通常，我們會結合 Vue 的雙向數據綁定來監聽表單輸入的變化，然後根據用戶的輸入結果動態地顯示相應的錯誤訊息。

表單驗證的核心步驟包括：

1.監控用戶輸入的數據。
2.根據輸入的數據進行驗證。
3.動態更新錯誤訊息或通過驗證。
4.提交表單時確認所有驗證通過。

基本表單驗證範例

讓我們從一個簡單的範例開始，驗證一個基本的用戶註冊表單，包含用戶名和電子郵件的輸入欄位。

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">用戶名</label>
      <input
        type="text"
        id="username"
        v-model="form.username"
        @blur="validateUsername"
      />
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
    
    <div>
      <label for="email">電子郵件</label>
      <input
        type="email"
        id="email"
        v-model="form.email"
        @blur="validateEmail"
      />
      <span v-if="errors.email">{{ errors.email }}</span>
    </div>
    
    <button type="submit">註冊</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: ''
      },
      errors: {
        username: null,
        email: null
      }
    };
  },
  methods: {
    // 驗證用戶名
    validateUsername() {
      if (!this.form.username) {
        this.errors.username = '用戶名不能為空';
      } else if (this.form.username.length < 3) {
        this.errors.username = '用戶名至少需要 3 個字元';
      } else {
        this.errors.username = null;
      }
    },
    
    // 驗證電子郵件
    validateEmail() {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!this.form.email) {
        this.errors.email = '電子郵件不能為空';
      } else if (!emailPattern.test(this.form.email)) {
        this.errors.email = '無效的電子郵件格式';
      } else {
        this.errors.email = null;
      }
    },
    
    // 提交表單
    submitForm() {
      this.validateUsername();
      this.validateEmail();
      
      if (!this.errors.username && !this.errors.email) {
        alert('表單提交成功');
        // 在這裡處理表單提交邏輯
      } else {
        alert('表單有錯誤，請更正');
      }
    }
  }
};
</script>

在這個範例中，我們手動定義了兩個驗證方法 validateUsername 和 validateEmail，並且在用戶失去焦點（@blur）時觸發驗證，然後動態更新錯誤訊息。

表單驗證的幾種常見方式

@blur vs @input

驗證的觸發時機可以有多種選擇，根據應用的需求，你可以選擇在輸入欄位失去焦點（@blur）時驗證，或者在用戶每次輸入（@input）時即時驗證。

<input
  type="text"
  v-model="form.username"
  @input="validateUsername"
/>

使用 @input 事件處理器可以在用戶每次輸入時進行實時驗證，這樣當用戶輸入有效數據時，會立刻顯示驗證通過。

表單提交前的全面驗證

除了單獨的即時驗證，通常我們會在表單提交時進行全面的驗證，確保所有欄位都通過驗證。這可以通過在提交事件中依次調用各個驗證方法來實現。

submitForm() {
  this.validateUsername();
  this.validateEmail();
  
  if (!this.errors.username && !this.errors.email) {
    // 通過驗證，提交表單
  } else {
    // 顯示錯誤訊息，阻止提交
  }
}

這種方式在表單驗證失敗時，可以阻止表單的提交，並讓用戶知道哪裡需要修正。

實現更複雜的驗證邏輯

在現實的應用場景中，表單驗證的邏輯可能會更加複雜，例如需要驗證密碼強度、兩個欄位是否一致，或是調用後端 API 進行驗證（如驗證用戶名是否已被註冊）。這些情況可以通過在驗證方法中加入額外的邏輯或使用異步方法來處理。

密碼驗證範例

例如，驗證密碼是否符合特定要求（如包含大小寫字母、數字和特殊字符）：

validatePassword() {
  const password = this.form.password;
  const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  
  if (!password) {
    this.errors.password = '密碼不能為空';
  } else if (!passwordPattern.test(password)) {
    this.errors.password = '密碼必須包含至少 8 個字符，並且包含大小寫字母、數字和特殊字符';
  } else {
    this.errors.password = null;
  }
}

異步驗證

在某些情況下，我們需要調用後端 API 進行驗證，例如驗證電子郵件或用戶名是否已經被使用。我們可以在 Vue 的方法中使用 async/await 來處理異步的驗證請求。

async validateUsername() {
  if (!this.form.username) {
    this.errors.username = '用戶名不能為空';
    return;
  }
  
  try {
    const response = await fetch(`/api/check-username?username=${this.form.username}`);
    const data = await response.json();
    
    if (data.exists) {
      this.errors.username = '用戶名已被使用';
    } else {
      this.errors.username = null;
    }
  } catch (error) {
    this.errors.username = '驗證失敗，請稍後再試';
  }
}

使用 Vue 3 的 ref 和 reactive 進行驗證

Vue 3 引入的 ref 和 reactive API 提供了一種更加靈活的方式來處理表單驗證。相比於 Vue 2 的 data，使用 ref 可以更加方便地操作單一數據，reactive 則能夠用來處理更加複雜的表單結構。

例如，使用 ref 來監控單個表單欄位的變化：

<script setup>
import { ref } from 'vue';

const username = ref('');
const errorMessage = ref('');

function validateUsername() {
  if (username.value.length < 3) {
    errorMessage.value = '用戶名至少需要 3 個字元';
  } else {
    errorMessage.value = '';
  }
}
</script>

<template>
  <input type="text" v-model="username" @blur="validateUsername">
  <span v-if="errorMessage">{{ errorMessage }}</span>
</template>

最佳實踐

在自定義表單驗證中，有一些最佳實踐可以幫助我們編寫更加清晰和可維護的代碼：

1.封裝驗證邏輯：將重複使用的驗證邏輯封裝成單獨的函數或組件。
2.減少耦合：保持驗證邏輯和表單結構分離，這樣可以更容易進行測試和修改。
3.即時反饋：盡可能提供即時的反饋，以提升用戶體驗。

Vue 3 提供了強大的響應式系統，讓我們能夠輕鬆實現靈活的自定義表單驗證邏輯。無論是簡單的欄位驗證，還是更複雜的業務需求，我們都可以利用 Vue 3 的功能實現高效的表單驗證方案。