Vue3中Vuelidate动态增删字段验证状态异常问题

问题本质 #

Vuelidate 的数组验证实例与数据数组的索引强绑定，当数组元素增删移位时，验证状态不会自动跟随数据项迁移，导致验证实例的索引与实际数据索引错位，出现错误状态丢失或错误继承的问题。

解决方案 #

1. 确保验证规则与数据数组严格同步 #

当前的验证规则已通过 computed 关联数组，但需保证规则数组的长度、顺序始终与 jobStore.jobAd.questions 完全一致：

const questionRules = computed(() =>
  jobStore.jobAd.questions.map(() => ({
    id: { required, numeric },
    question: { required },
    idealAnswer: { required }
  }))
);

2. 数组变化时重新初始化验证实例 #

Vuelidate 不会自动监听数组增删来更新验证实例，需通过 watch 监听数组变化，重新创建验证实例：

import { watch, ref } from 'vue';

export function useJobAdValidation() {
  const { vuelidateInstance, useVuelidate } = useVuelidateValidation();
  const jobStore = useJobStore();

  const questionRules = computed(() =>
    jobStore.jobAd.questions.map(() => ({
      id: { required, numeric },
      question: { required },
      idealAnswer: { required }
    }))
  );

  const rules = computed(() => ({
    title: { required, text },
    description: { required, text },
    roleName: { required, text },
    department: { text },
    salary: {
        currency: { required, text },
        min: { required, numeric },
        max: { required, numeric },
    },
    officeLocation: { required, text },
    employmentTypeCode: { required, text },
    candidateRequirements: jobStore.jobAd.candidateRequirements.map(() => ({
        id: { required, numeric },
        requirement: { required, text },
    })),
    candidateResponsibilities: jobStore.jobAd.candidateResponsibilities.map(() => ({
        id: { required, numeric },
        responsibility: { required, text},
    })),
    questions: questionRules.value,
    adGoLiveDate: { required, text },
    jobStartDate: { required, text },
    expiresAt: { required, text },
  }));

  // 用ref包裹验证实例，方便后续更新
  const jobAdFormValidation = ref(vuelidateInstance(rules, jobStore.jobAd));

  // 深度监听questions数组变化，重新初始化验证实例
  watch(
    () => jobStore.jobAd.questions,
    () => {
      // 重置旧实例状态
      jobAdFormValidation.value.$reset();
      // 创建新的验证实例
      jobAdFormValidation.value = vuelidateInstance(rules, jobStore.jobAd);
      // 重新触发现有数据的验证，保留原有错误状态
      jobAdFormValidation.value.$touch();
    },
    { deep: true }
  );

  return {
    jobAdFormValidation,
  };
}

3. 修改错误提取逻辑，摆脱索引依赖 #

原错误提取依赖带索引的 $propertyPath，移位后会失效，改为直接读取当前验证实例的字段错误：

const errors = (index: number, property: string) => {
  const questionValidation = jobAdFormValidation.value?.questions?.[index];
  if (!questionValidation) return null;
  // 直接匹配字段名称，而非带索引的路径
  return questionValidation.$errors.find(e => e.$property === property)?.$message || null;
};

4. 简化删除操作逻辑 #

无需单独重置被删除项的验证状态，数组变化后 watch 会自动触发验证实例更新：

const handleQuestionDelete = () => {
  const questionIndex = jobStore.findLocalQuestionIndex(deleteQuestionId.value);
  jobStore.deleteLocalQuestionById(deleteQuestionId.value);
  questionRefs.value.splice(questionIndex, 1);
  deleteQuestionDialogState.value = false;
};

效果验证 #

修改后：

• 删除字段2后，原字段3（新字段2）的验证状态会正确映射到新索引，保留原有错误
• 新增字段时，新字段会获得全新的验证状态，不会继承旧索引的错误

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