Yup验证中的对象类型错误与自定义API错误处理指南

import * as yup from 'yup';

// 定义一个包含 'add-record' 键的验证模式集合
export const validationSchemas = {
    'add-record': yup.object().shape({
        'myId': yup
            .string()
            .nullable()
            .required('My ID is required'),
        'name': yup
            .string()
            .required('Name is required'),
        // ...其他字段
    })
};

// 假设 props.formRef.current.getValues("myId") 返回 "123456789"
// 这是一个字符串，而不是一个对象
const singleFieldValue = props.formRef.current.getValues("myId");

try {
    // 错误用法：将单个字符串值传递给期望对象的模式
    await validationSchemas['add-record'].validate(singleFieldValue, { context: { other: 4 } });
} catch (error) {
    // 这里会抛出 "this must be a object type, but the final value was: null (cast from the value "123456789")"
    console.error('验证失败:', error);
}

// 假设 props.formRef.current 是一个表单引用，例如来自 react-hook-form
// getValues() 不带参数时会返回整个表单的值对象
const formValues = props.formRef.current.getValues();

// formValues 示例：{ myId: "123456789", name: "John Doe", ... }

try {
    // 正确用法：将整个表单值对象传递给对象模式
    await validationSchemas['add-record'].validate(formValues, { context: { other: 4 } });
    console.log('表单验证成功！');
} catch (error) {
    if (error instanceof yup.ValidationError) {
        console.error('表单验证失败，错误详情:', error.errors);
        // 在这里可以遍历 error.errors 来更新UI显示每个字段的错误信息
    } else {
        console.error('发生未知错误:', error);
    }
}

// 假设这是从API响应中获取的错误信息
const apiErrorContext = {
    isMyIdServiceError: true, // 标志位，指示myId字段是否有API错误
    myIdServiceErrorMsg: '该ID已被占用，请尝试其他ID。' // 具体的API错误消息
};

// ... 在你的组件或业务逻辑中调用验证
const formValues = props.formRef.current.getValues();
try {
    await validationSchemas['add-record'].validate(formValues, { context: apiErrorContext });
    console.log('表单验证成功！');
} catch (error) {
    if (error instanceof yup.ValidationError) {
        console.error('表单验证失败:', error.errors);
    }
}

import * as yup from 'yup';

export const validationSchemas = {
    'add-record': yup.object().shape({
        'myId': yup
            .string()
            .nullable()
            .required('My ID is required')
            .test(
                'api-error-check', // 测试的唯一名称
                '默认的API错误信息', // 这是一个备用或占位符消息
                async function (value) { // value 是当前字段的值
                    // 从验证上下文 (this.options.context) 中获取API错误信息
                    const { isMyIdServiceError, myIdServiceErrorMsg } = this.options.context;

                    if (isMyIdServiceError) {
                        // 如果存在API错误，则使用 this.createError() 创建一个Yup验证错误
                        return this.createError({
                            message: myIdServiceErrorMsg, // 使用从context获取的动态错误消息
                            path: this.path, // 确保错误关联到当前字段
                        });
                    }
                    return true; // 如果没有API错误，则验证通过
                }
            ),
        'name': yup
            .string()
            .required('Name is required'),
        // ...其他字段
    })
};