如何在Vite+Vue3+Shadcn+Vee-Validate+Zod项目中实现失焦验证

要实现输入框失焦后才显示验证错误，只需调整Vee-Validate的验证触发模式即可，有两种配置方式：

1. 全局配置（整个表单生效） #

在useForm的配置参数中添加mode: 'blur'，表单内所有字段都会在失去焦点时才触发验证：

const { handleSubmit } = useForm({
    validationSchema: formSchema,
    mode: 'blur' // 全局设置验证触发时机为失焦
})

2. 单个字段配置（仅目标字段生效） #

如果只想针对特定字段设置，直接在FormField组件上添加validation-mode="blur"属性：

<FormField v-slot="{ componentField }" name="phone" validation-mode="blur">
  <!-- 字段内容 -->
</FormField>

修改后的完整代码（全局配置版本） #

<script setup lang="ts"> 
import { Input } from '@/components/ui/input' 
import { Button } from '@/components/ui/button' 
import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form'
import { useForm } from 'vee-validate' 
import { toTypedSchema } from '@vee-validate/zod' 
import * as z from 'zod' 
import { vAutoAnimate } from '@formkit/auto-animate/vue'    
    
const formSchema = toTypedSchema(z.object({
    phone: z.coerce.string().length(10, {message: 'This phone number is invalid.'}) 
}))

const { handleSubmit } = useForm({
    validationSchema: formSchema,
    mode: 'blur'
})

const onSubmit = handleSubmit((values) => {
    // 处理提交逻辑
    console.log(values)
}) 
</script>

<template>
    <form @submit="onSubmit">
        <FormField v-slot="{ componentField }" name="phone">
            <FormItem v-auto-animate>
                <FormControl>
                    <div class="relative mt-7">
                        <Input id="phone" type="number" placeholder="1234567890" class="pl-10" v-bind="componentField" />
                        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
                        +1
                        </span>
                    </div>
                </FormControl>
                <FormMessage />
            </FormItem>
        </FormField>
        <Button type="submit" size="lg" class="font-bold w-full mt-7 text-lg">
            continue
            <i class="isax isax-arrow-right-1 text-2xl ml-1"></i>
        </Button>
    </form> 
</template>

说明 #

• Vee-Validate默认验证模式为input，即每次输入都会触发验证，改为blur后仅在字段失焦时触发。
• 设置mode: 'blur'后，表单提交时仍会自动验证所有字段，不影响提交逻辑。

内容的提问来源于stack exchange，提问作者Heyran.rs