使用 Vue.js 實現表單驗證

Vue.js 是一個輕量級的 JavaScript 框架，能夠幫助開發者快速開發高品質的 Web 應用程式。隨著 Vue 3 的推出，表單驗證的實作方式也有了新的最佳實踐。本文將介紹如何使用 Vue.js 實現表單驗證，並提供了完整的實作範例，包含錯誤處理與延伸應用。

前置準備

在開始之前，我們需要先安裝 Vue.js，可以使用 npm 或 CDN 來安裝。

npm install vue@next

或者

<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>

建立表單

接下來，我們需要建立一個表單，並將它放到 Vue.js 的應用程式中。

<div id="app">
  <form @submit.prevent="submitForm">
    <label>姓名:</label>
    <input type="text" v-model="name" required>
    <label>電子郵件:</label>
    <input type="email" v-model="email" required>
    <button type="submit">提交</button>
  </form>
</div>

加入表單驗證

現在，我們需要加入表單驗證功能。這裡我們將使用 Vue 的計算屬性來進行簡單的驗證。

new Vue({
  el: '#app',
  data: {
    name: '',
    email: '',
    errors: {}
  },
  methods: {
    submitForm() {
      this.errors = {};
      
      if (this.name.length < 3) {
        this.errors.name = '姓名必須至少 3 個字元';
      }
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(this.email)) {
        this.errors.email = '請輸入有效的電子郵件地址';
      }

      if (Object.keys(this.errors).length === 0) {
        alert('表單已成功提交！');
      }
    }
  }
});

加入錯誤訊息

接下來，我們需要加入錯誤訊息，當使用者輸入不符合規則時，可以顯示錯誤訊息。

<div id="app">
  <form @submit.prevent="submitForm">
    <label>姓名:</label>
    <input type="text" v-model="name" required>
    <span v-if="errors.name">{{ errors.name }}</span>
    <label>電子郵件:</label>
    <input type="email" v-model="email" required>
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit">提交</button>
  </form>
</div>

上面的程式碼中，我們使用 `v-if` 指令來控制錯誤訊息的顯示，並將錯誤訊息儲存在 `errors` 物件中。

加入 Vue.js 應用程式

最後，我們需要將表單加入 Vue.js 應用程式中，並將表單驗證功能整合在一起。

<div id="app">
  <form @submit.prevent="submitForm">
    <label>姓名:</label>
    <input type="text" v-model="name" required>
    <span v-if="errors.name">{{ errors.name }}</span>
    <label>電子郵件:</label>
    <input type="email" v-model="email" required>
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit">提交</button>
  </form>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: '',
      email: '',
      errors: {}
    },
    methods: {
      submitForm() {
        this.errors = {};
        
        if (this.name.length < 3) {
          this.errors.name = '姓名必須至少 3 個字元';
        }
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(this.email)) {
          this.errors.email = '請輸入有效的電子郵件地址';
        }

        if (Object.keys(this.errors).length === 0) {
          alert('表單已成功提交！');
        }
      }
    }
  });
</script>

總結

在本文中，我們介紹了如何使用 Vue.js 實現表單驗證功能，包括基本的錯誤處理與最佳實踐。Vue.js 提供了一個強大的表單驗證功能，能夠讓開發者快速開發出合乎需求的表單驗證功能。

Q&A（常見問題解答）

1. 如何在 Vue.js 中使用第三方表單驗證庫？

您可以使用像 VeeValidate 或 Vuelidate 這樣的第三方庫來增強表單驗證功能，這些庫提供了更多的驗證規則與功能，簡化了表單驗證的實作。

2. 如何處理異步驗證？

您可以在表單提交時進行 AJAX 請求來驗證資料，例如檢查電子郵件是否已被註冊，並根據回應更新錯誤訊息。

3. Vue 3 中的表單驗證有什麼變化？

Vue 3 引入了 Composition API，這使得狀態管理和驗證邏輯的分離變得更加容易，您可以使用 `setup` 函數來更靈活地管理表單資料和驗證邏輯。
---

Categorized in:

vuevue.js

Tagged in:

,