Vuetify + Vee-Validate 多步骤表单：避免挂载时自动校验

动态创建表单字段（重复器或多步骤挂载）时，Vee-Validate默认会在字段挂载完成后立即执行校验，而Zod的必填类规则会直接将初始空值判定为错误，导致用户未操作就出现错误提示。以下是几种实用的解决办法：

1. 启用lazy延迟校验 #

给动态字段的<Field>组件添加lazy属性，让校验只在用户触发交互（输入、失焦等）后才执行：

<Field
  v-model="item.value"
  :name="`dynamic_${item.id}`"
  :rules="dynamicFieldRule"
  lazy
/>

如果用useField组合式API，在配置中开启lazy：

const { value, error } = useField(`dynamic_${id}`, dynamicFieldRule, { lazy: true });

2. 调整Zod规则兼容初始空值 #

通过optional()配合refine()，让字段初始空值不触发校验，仅当用户输入后清空时才报错：

import { z } from 'zod';

const dynamicFieldRule = z
  .string()
  .optional()
  .refine(val => val?.trim() !== '', '此字段不能为空');

这样刚创建的空字段不会触发错误，用户输入后再删除内容才会提示校验失败。

3. 全局关闭挂载时自动校验（多场景适配） #

在useForm中关闭validateOnMount，仅在切换步骤或提交时手动触发校验，同时给不同步骤的字段设置scope分组，精准控制校验范围：

const { handleSubmit, validate } = useForm({
  validateOnMount: false,
});

// 切换下一步前校验当前步骤字段
const nextStep = async () => {
  const { valid } = await validate({ scope: 'step-1' });
  if (valid) {
    currentStep.value = 2;
  }
};

字段上绑定scope：

<Field
  v-model="formData.name"
  name="name"
  :rules="nameRule"
  scope="step-1"
/>

4. 给动态字段设置合法默认值 #

如果业务场景允许，给新增的动态字段设置符合Zod规则的默认值，避免初始空值触发校验：

const addField = () => {
  dynamicFields.push({
    id: Date.now(),
    value: '', // 若规则允许空字符串则直接用，否则设为合法初始值
  });
};

内容的提问来源于stack exchange，提问作者RonZ