使用Vee-validate+Yup时嵌套对象字段不显示校验错误

你的问题出在嵌套字段的路径标识错误，Vee-Validate 需要通过完整的字段路径来关联 Yup 中的嵌套校验规则，而你直接用了field1作为字段名，它无法匹配到testFields.field1这个嵌套路径的校验规则。

修正后的代码 #

JavaScript 部分

import { useForm } from 'vee-validate'
import * as yup from 'yup'

const {
  values,
  errors,
  defineComponentBinds,
  isSubmitting,
  setFieldValue,
  handleSubmit
} = useForm({
  validationSchema: yup.object({
    field0: yup.string().label('Field 0').required(),
    testFields: yup.object().shape({
      field1: yup.string().label('Field 1').required()
    })
  })
})

const field0 = defineComponentBinds('field0')
// 关键：传入完整的嵌套字段路径 testFields.field1
const testField1 = defineComponentBinds('testFields.field1')

模板部分

<pre>{{ field0 }}</pre>
<InputText
 v-bind="field0"
 class="w-full border-left-3 border-red-600"
/>
<pre>{{ testField1 }}</pre>
<InputText
 v-bind="testField1"
 class="w-full border-left-3 border-red-600"
/>

补充说明 #

如果需要保留testFields对象的结构，也可以这样写：

const testFields = {
  field1: defineComponentBinds('testFields.field1')
}

模板部分保持原来的v-bind="testFields.field1"即可，核心还是要传入完整的嵌套字段路径。

这样修改后，Vee-Validate 就能正确关联到 Yup 中testFields.field1的校验规则，提交时会正常显示必填错误提示。

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