基本使用

<template>
    <Form @submit="onSubmit">
        <Field name="account" v-model="account" :rules="emailRule" 
           :validate-on-input="true" />
        <ErrorMessage name="account" />
        <hr />
        <button>提交表单</button>
    </Form>
</template>

<script setup lang="ts">
import { Form, Field, ErrorMessage } from 'vee-validate';  // 导入相关包
import { ref } from 'vue';

const account = ref('');
// 定义表单规则
const emailRule = (value: any) => {
    // 通过@符号，判断是否是邮箱
    return /@/.test(value) ? true : '邮箱格式错误';
}
// 表单提交
const onSubmit = (values: any) => {
    // values是表单项数据
    console.log(values);
    alert('验证通过')
}
</script>

<style lang="scss">
div {
    @apply flex w-screen h-screen justify-center items-center;
    input {
        @apply border-2 p-2 rounded-md border-violet-950 outline-none;
    }
}
</style>

vee-validate包是通过主键来进行操作，其中Form, Field, ErrorMessage等都是包的主键（主键就是可以作为标签进行使用，和element-UI类似）

• Form主键：表单的顶级主键（整个表单主键），必须要有
• Field：每个具体字段的主键
  • 为主键设置名称<Field name="account" />
  • :rules="emailRule"表示为主键设置对应的规则
  • 该字段输入框是在失去焦点的时候触发验证规则，我们可以进行修改为输入框发生改变的时候进行校验规则的触发：:validate-on-input="true"
• ErrorMessage主键：用于显示错误消息的主键，根据name进行具体表单的匹配，为这个具体的表单显示对应的错误消息