Vue 2.x版本中，有很多的表單項(xiàng)需要進(jìn)行校驗(yàn)，每個(gè)輸入項(xiàng)的校驗(yàn)邏輯都有一些重復(fù)工作，這時(shí)可以使用AJV庫(kù)進(jìn)行封裝，使得校驗(yàn)邏輯復(fù)用、規(guī)范和方便。

在Vue項(xiàng)目中使用AJV，需要安裝AJV的依賴包：ajv@^6.0.0 和 ajv-errors@^1.0.0。其中ajv-errors是AJV的一個(gè)擴(kuò)展包，用于錯(cuò)誤信息的擴(kuò)展和自定義。

npm install ajv@^6.0.0 ajv-errors@^1.0.0 --save

在Vue項(xiàng)目中，一般選擇使用AJV的Vue插件vue-ajv-validator，使用非常方便。在main.js中引入該插件，并且安裝：

import Vue from 'vue'
import Ajv from 'ajv'
import AjvErrors from 'ajv-errors'
import AjvFormatter from 'ajv-formatter'
import { AjvValidator } from 'vue-ajv-validator'
const ajv = new Ajv({
allErrors: true,
jsonPointers: true
})
AjvErrors(ajv)
AjvFormatter(ajv)
Vue.use(AjvValidator, {
ajv
})

上面代碼中，我們初始化了一個(gè)AJV實(shí)例，并注冊(cè)了ajv-errors和ajv-formatter插件，接著在Vue中安裝了vue-ajv-validator插件，并將AJV實(shí)例傳入注冊(cè)的插件中。

在組件中，我們可以使用$ajv校驗(yàn)器對(duì)象進(jìn)行校驗(yàn)。我們還可以在組件props中定義校驗(yàn)規(guī)則，用于校驗(yàn)傳入props的數(shù)據(jù)。例如：

export default {
props: {
title: {
type: String,
required: true,
ajv: {
minLength: 5
}
},
description: {
type: String,
ajv: {
maxLength: 100
}
}
},
mounted() {
this.$ajv.validate('title', this.title)
this.$ajv.validate('description', this.description)
}
}

上面代碼中，我們?cè)趖itle和description屬性中使用了ajv配置，將title限制最小長(zhǎng)度為5，將description限制最大長(zhǎng)度為100。在mounted生命周期中，我們使用this.$ajv.validate方法進(jìn)行校驗(yàn)。