1、首先安装vee-validate（指定版本），安装命令如下：

npm i vee-validate@4.0.3

2、在app.vue中写入如下内容：用vee-validate提供的Form组件代替form标签，用Field组件代替input标签，errors是接收校验的错误信息放在v-slot中，errors的键其实就是form中的键，值就是TRUE和FALSE

<template>
  <Form ref="formCom" class="form" :validation-schema="MySchema" v-slot="{errors}" autocomplete="off">
      <div class="form-item">
        <div class="input">
          <Field :class="{error:errors.account}" v-model="form.account" name="account" type="text" placeholder="请输入用户名" ></Field>
        </div>
        <div class="error" v-if="errors.account">
          {{errors.account}}
        </div>
      </div>
      <div class="form-item">
        <div class="input">
          <Field :class="{error:errors.password}" v-model="form.password" name="password" type="password" placeholder="请输入密码" />
        </div>
        <div class="error" v-if="errors.password">
          {{errors.password}}
        </div>
      </div>
    <a @click="login" href="javascript:;" class="btn">重置</a><br>
    <a @click="check_one" href="javascript:;" class="btn">对用户名单独校验</a><br>
    <a @click="check_all" href="javascript:;" class="btn">提交前全部校验</a>
  </Form>
</template>

<!--script 没用直接使用setup的一种实现方式-->
<!--<script >-->
<!--import schema from './validate-schema'-->
<!--import { Form, Field } from 'vee-validate'-->
<!--import { reactive, ref} from "vue";-->
<!--export default {-->
<!--  components:{Form, Field},-->
<!--  setup(){-->
<!--    const formCom = ref(null)-->

<!--    const form = reactive({-->
<!--      account: null,-->
<!--      password: null,-->
<!--    })-->
<!--    const MySchema = {-->
<!--      // 校验函数规则：返回true就是校验成功，返回一个字符串就是失败，字符串就是错误提示-->
<!--      account: schema.account,-->
<!--      password: schema.password,-->
<!--    }-->

<!--    const login = ()=>{-->
<!--      form.account = null-->
<!--      form.password = null-->
<!--      formCom.value.resetForm()-->
<!--    }-->

<!--    return {login, form, MySchema, formCom}-->
<!--  },-->
<!--}-->
<!--</script>-->

<!--直接是用setup的一种使用方式-->
<script setup>
import schema from './validate-schema'
import { Form, Field } from 'vee-validate'
import { reactive, ref} from "vue";
const formCom = ref(null)

const form = reactive({
  account: null,
  password: null,
})
const MySchema = {
  // 校验函数规则：返回true就是校验成功，返回一个字符串就是失败，字符串就是错误提示
  account: schema.account,
  password: schema.password,
}

const login = ()=>{
  form.account = null
  form.password = null
  formCom.value.resetForm()
}
const check_one =()=>{
  const valid = schema.account(form.account)
  console.log('check_one', valid)
}
const check_all= async ()=>{
  const valid = await formCom.value.validate()
  console.log('check_all', valid)
}
// 失败，使用vee的错误函数显示错误信息 setFieldError(字段,错误信息)
// formCom.value.setFieldError('mobile', valid)
</script>

<style lang="less" scoped>
.form{
  margin-left: 20px;
  .form-item{
    height: 70px;
    box-sizing: border-box;
    .input{
      width: 300px;
      //text-align: center;
      line-height: 40px;
      height: 40px;
      box-sizing: border-box;
      margin-bottom: 5px;
      input{
        height: 100%;
        border: 1px solid black;
      }
    }
  }


  .error{
    color: red;
    //margin-top: 2px;
  }
}
</style>

这里边有个特别需要注意的是重置按钮点击后在formCom.value.resetForm()之前要先清空form表单，否则感觉resetForm()无效

3、新建一个叫validate-schema.js作为表单验证，其内容如下：

// 定义校验规则提供给vee-validate组件使用
export default {
    // 校验account
    account (value) {
        // value是将来使用该规则的表单元素的值
        // 1. 必填
        // 2. 6-20个字符，需要以字母开头
        // 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。
        if (!value) return '请输入用户名'
        if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'
        return true
    },
    password (value) {
        if (!value) return '请输入密码'
        if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
        return true
    },
    mobile (value) {
        if (!value) return '请输入手机号'
        if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'
        return true
    },
    code (value) {
        if (!value) return '请输入验证码'
        if (!/^\d{6}$/.test(value)) return '验证码是6个数字'
        return true
    },
    isAgree (value) {
        if (!value) return '请勾选同意用户协议'
        return true
    }
}

4、效果如下：