配合插槽使用原生表单

主键都有插槽，vee-validate包中的主键也不例外

如果我们想要使用原生表单的形式去设置我们的表单，我们可以使用插槽的形式进行优化：

<template>
    <Form @submit="onSubmit">
        <Field name="account" v-model="account" :rules="emailRule" 
            :validate-on-input="true"
            #default="{ field, errorMessage }">
            <input v-bind="field" v-model="account" />
            <hr />
            <p>{{ errorMessage }}</p>
        </Field>
        <hr />
        <button>提交表单</button>
    </Form>
</template>

<script setup lang="ts">
import { Form, Field } 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>

#default="{ field, errorMessage }"：在插槽中接收到数据（表单数据和错误消息数据），将field数据绑定到原生的表单<input>中

我们可以使用系统提供的验证规则进行规则验证，vee-validate/rules包提供了大量系统编写好的验证规则，如是否唯一，最小数量和最大数量等等，用的时候需要进行导入：

import { required, min, max, confirmed, email } from '@vee-validate/rules';

<template>
    <Form @submit="onSubmit">
        <Field name="account" v-model="account" 
            :rules="{ email: true, required: true }" 
            :validate-on-input="true"
            #default="{ field, errorMessage }">
            <input v-bind="field" v-model="account" />
            <hr />
            <p>{{ errorMessage }}</p>
        </Field>
        <hr />
        <button>提交表单</button>
    </Form>
</template>

<script setup lang="ts">
import { Form, Field, defineRule } from 'vee-validate';
import { required, email } from '@vee-validate/rules';
import { ref } from 'vue';

const account = ref('');
// 声明系统提供的验证规则
defineRule('email', email);
defineRule('required', required);
// 表单提交
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>

上述的验证规则的提示信息是英文的，如果我们需要中文的验证规则提示，我们需要安装一个多语言包

npm install @vee-validate/i18n

使用的时候先导入这个包和中文字典：

<template>
    <Form @submit="onSubmit">
        <!-- <Field name="account" v-model="account" :rules="emailRule" :validate-on-input="true" />
        <ErrorMessage name="account" /> -->
        <Field name="account" label="账号" v-model="account" 
            :rules="{ email: true, required: true}" :validate-on-input="true"
            #default="{ field, errorMessage }">
            <input v-bind="field" v-model="account" />
            <hr />
            <p>{{ errorMessage }}</p>
        </Field>
        <hr />
        <button>提交表单</button>
    </Form>
</template>

<script setup lang="ts">
import { Form, Field, defineRule, configure } from 'vee-validate';
import { required, email } from '@vee-validate/rules';
import { localize } from '@vee-validate/i18n';
import zh_CN from '@vee-validate/i18n/dist/locale/zh_CN.json';
import { ref } from 'vue';

const account = ref('');
// 声明系统提供的验证规则
defineRule('email', email);
defineRule('required', required);
// 配置中文
configure({
    generateMessage: localize('zh_CN', zh_CN)
})

// 表单提交
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>

label="账号"表示为name="account"设置中文别名，使在出现错误信息时可以将account用账号中文代替