Vue在構建表單時提供了內置的校驗指令，以便開發人員能夠輕松地處理數據驗證。通過這種方式，可以確保整個應用程序的數據的可靠性從而減少錯誤。Vue的內置校驗功能允許我們使用簡單的HTML屬性設置驗證規則。在本文中，我將為您演示如何使用Vue表單校驗。

讓我們看看一個簡單的表單，它包含兩個輸入框和一個提交按鈕：

<form @submit.prevent="onSubmit">
<label for="name">Name:</label>
<input type="text" id="name" v-model="name" required>
<p v-if="$v.name.$error">請輸入姓名</p>
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" required>
<p v-if="$v.email.$error">請輸入正確的郵箱地址</p>
<button type="submit">Submit</button>
</form>

在上面的示例中，我們使用了vue-form-validation庫。首先，我們需要導入庫并定義一組規則：

import { validationMixin } from 'vuelidate'
import { required, email } from 'vuelidate/lib/validators'
export default {
name: 'Form',
mixins: [validationMixin],
validations: {
name: {
required
},
email: {
required,
email
}
},
data: () =>({
name: '',
email: ''
}),
methods: {
onSubmit() {
// ...
}
}
}

在上述代碼中，我們將validationMixin混合到組件中，然后定義了一個validations屬性來定義規則。在這里，我們為name和email輸入框定義了規則。在規則中，我們使用了required和email驗證器。

最后，在我們的onSubmit方法中，我們可以訪問該組件的$ v對象。我們可以檢查一個輸入框是否已經被驗證過并且是否已經觸發了錯誤。如果是，則可以顯示錯誤信息。

總結：Vue表單校驗是一個非常有用的工具，可以幫助我們輕松地處理數據驗證。在本文中，我們了解了如何使用vue-form-validation庫來設置和定義規則，以及如何在組件中訪問$ v對象來檢查和顯示驗證錯誤。