當我們使用Vue.js來開發(fā)Web應用程序時，我們通常需要對用戶輸入進行校驗。Vue實現(xiàn)了很多種類型的校驗，包括：文本校驗、數(shù)字校驗、日期校驗、自定義校驗等等。在這篇文章中，我們將會介紹Vue自動觸發(fā)輸入框校驗的方法。

在Vue中，輸入框校驗是通過使用v-model指令來實現(xiàn)的。v-model指令提供了一個:checked屬性，用于指示輸入框是否通過校驗。當用戶修改輸入框的值時，Vue將自動重新校驗該輸入框，并根據(jù)新的校驗結果更新:checked屬性。

<template>
<div>
<input v-model="form.email" :class="{ 'is-invalid': !$v.form.email.$dirty || $v.form.email.email }" type="email" name="email" id="email" placeholder="Email" required />
<div v-show="!$v.form.email.email">Invalid email address</div>
</div>
</template>
<script>
import { required, email } from 'vuelidate/lib/validators'
export default {
data () {
return {
form: {
email: ''
}
}
},
validations: {
form: {
email: {
required,
email
}
}
}
}
</script>

在上面的例子中，我們定義了一個包含email字段的表格。我們使用vuelidate插件來定義email字段的校驗規(guī)則，在郵箱輸入框中使用v-model指令綁定email字段。我們在輸入框的class屬性中使用了一個三元表達式來判斷輸入框是否通過了校驗。

當用戶鍵入郵箱地址時，Vue會自動重新校驗該輸入框。如果輸入框通過了校驗，v-model會更新表格中的email字段并將:checked屬性設置為true。如果輸入框未通過校驗，v-model會將:checked屬性設置為false，并將class設置為is-invalid。在輸入框下方，我們使用v-show指令顯示了一個錯誤消息，以指示用戶輸入的內容不合法。