背景：

        由于没有使用组件库，因此我们需要使用vee-validate实现一种通用的表单校验。

        vee-validate已经  全面支持vue3最新语法 ，vee-validate在使用上也有很大的变化

        如果组件库对vue3甚至支持的不好,   或者组件库在校验方便支持的不好,  或者你压根不准备用任何组件库，都可以用 vee-validate。

（1）安装

yarn add vee-validate

 （2）导入函数

import { useField, useForm } from 'vee-validate'

（3）通过useForm提供校验规则

useForm({
  validationSchema: {
    xxx(value: string) {
      // 校验规则
    }
  }
})

（4）useField提供value值和错误信息

const { value, errorMessage } = useField('xxx')

（5）与input框双向绑定

<div>
  <input
    type="text"
    v-model="value"
    placeholder="请输入内容"
  />
</div>

（6）显示错误

<div v-if="errorMessage">
  {{ errorMessage }}
</div>

为了方便测试，还可以提供初始值

useForm({
  validationSchema: {
     
  },
  
  // 设置初始值
  initialValues: {
    xxx: 'xxx'
  }
})