使用Yup和react-hook-form实现多字段表单校验及自定义异常问题

问题根源 #

React Hook Form仅追踪表单中注册过的字段，general并非表单实际字段；同时Yup顶层自定义校验中，若路径未在Schema里定义，错误不会被正确捕获并关联到formState.errors。

解决步骤 #

1. 在Yup Schema中添加general字段占位 #

在object shape里新增general字段（无需校验规则，仅作为错误路径的载体）：

yup
  .object()
  .shape({
    source: yup.string().required(),
    featureType: yup.string().required(),
    table: yup.object({
      data: yup.array().of(
        yup.object({
          timestamp: yup.date().required(),
          mmsi: yup.string(),
          ircs: yup.string(),
          extMarking: yup.string(),
          name: yup.string(),
          flag: yup.string(),
          type: yup
            .string()
            .oneOf(TypeSelectOptions.map((opt) => opt.value))
            .required(),
          latitude: yup.string(),
          longitude: yup.string(),
          heading: yup.string(),
        })
      ),
    }),
    externalPositions: yup.object({
      active: yup.boolean(),
      radioButton: yup.string(),
      checkboxes: yup.array().of(
        yup.object({
          label: yup.string(),
          checked: yup.boolean(),
        })
      ),
    }),
    // 添加general字段占位，用于承载全局错误
    general: yup.string().nullable()
  })
  .test({
    name: 'maxMmsi',
    test: function (form, { createError }) {
      if (
        form.externalPositions.active &&
        _.uniqBy(form.table.data, 'mmsi').length > 10 // 与错误消息统一逻辑，原代码为>2，消息提示10个上限
      )
        return createError({
          path: 'general',
          message: 'Importing is limited to a max of 10 distinct vessels',
        })
      return true
    },
  })

2. 在组件中读取并展示general错误 #

通过React Hook Form的formState.errors获取全局错误并渲染：

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: yupResolver(yourValidationSchema)
});

// 渲染全局错误提示
{errors.general && <div className="form-error">{errors.general.message}</div>}

3. 统一校验逻辑与错误消息（可选） #

原代码校验条件为_.uniqBy(...) > 2，但错误消息提示最多10个，建议将条件改为>10，保持逻辑与提示一致。

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