使用 Vue.js 實現表單驗證

Vue.js 是一個輕量級的 JavaScript 框架，它可以讓開發者快速開發出高品質的 Web 應用程式。Vue.js 提供了一個強大的表單驗證功能，可以讓開發者快速開發出表單驗證功能。本文將介紹如何使用 Vue.js 實現表單驗證。

前置準備

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

npm install vue

或者

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

建立表單

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

<div id="app">
  <form>
    <label>Name:</label>
    <input type="text" v-model="name">
    <label>Email:</label>
    <input type="text" v-model="email">
    <button type="submit">Submit</button>
  </form>
</div>

加入表單驗證

接下來，我們需要加入表單驗證功能，可以使用 Vue.js 的 v-validate 指令來實現。

<div id="app">
  <form>
    <label>Name:</label>
    <input type="text" v-model="name" v-validate="'required|min:3'">
    <label>Email:</label>
    <input type="text" v-model="email" v-validate="'required|email'">
    <button type="submit">Submit</button>
  </form>
</div>

上面的程式碼中，我們使用 v-validate 指令來指定表單驗證規則，required 表示必填，min:3 表示最少要輸入 3 個字，email 表示必須是有效的電子郵件地址。

加入錯誤訊息

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

<div id="app">
  <form>
    <label>Name:</label>
    <input type="text" v-model="name" v-validate="'required|min:3'">
    <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
    <label>Email:</label>
    <input type="text" v-model="email" v-validate="'required|email'">
    <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
    <button type="submit">Submit</button>
  </form>
</div>

上面的程式碼中，我們使用 v-show 指令來控制錯誤訊息的顯示，errors.has('name') 用來檢查是否有錯誤，errors.first('name') 用來取得錯誤訊息。

加入 Vue.js 應用程式

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

<div id="app">
  <form>
    <label>Name:</label>
    <input type="text" v-model="name" v-validate="'required|min:3'">
    <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
    <label>Email:</label>
    <input type="text" v-model="email" v-validate="'required|email'">
    <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
    <button type="submit">Submit</button>
  </form>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: '',
      email: ''
    }
  })
</script>

上面的程式碼中，我們使用 new Vue() 來建立 Vue.js 應用程式，並且將表單驗證功能加入應用程式中。

總結

在本文中，我們介紹了如何使用 Vue.js 實現表單驗證功能。Vue.js 提供了一個強大的表單驗證功能，可以讓開發者快速開發出表單驗證功能。

Categorized in:

vuevue.js

Tagged in:

,