Vue form validator是一款基于Vue開發(fā)的表單驗證插件，它可以讓開發(fā)者快速簡單地添加表單驗證。下面來看一下怎么使用它。

首先，在HTML中引入Vue和Vue form validator：

<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Vue form validator -->
<script src="https://cdn.jsdelivr.net/npm/vue-form-validator/dist/vue-form-validator.js"></script>

然后，在Vue實例中定義表單數(shù)據(jù)和驗證規(guī)則：

var vm = new Vue({
data: {
formData: {
username: '',
password: ''
}
},
validators: {
// 驗證用戶名是否為空
notEmpty: function(value) {
return value.trim() !== '';
},
// 驗證密碼長度是否符合要求
passwordLength: function(value) {
return value.length >= 6 && value.length<=16;
}
}
});

現(xiàn)在，我們可以在HTML中添加表單并進行驗證了：

<form>
<label>用戶名</label>
<input type="text" v-model="formData.username" v-validate="'notEmpty'">
<br><br>
<label>密碼</label>
<input type="password" v-model="formData.password" v-validate="'passwordLength'">
<br><br>
<button type="submit" :disabled="!$v.formData.$invalid">提交</button>
</form>

這里使用了v-validate指令來綁定驗證規(guī)則。當(dāng)用戶的輸入不滿足相應(yīng)的規(guī)則時，$invalid屬性會變?yōu)閠rue，$invalid為false時，表單提交按鈕才可用。