React Hook Form集成服务端验证及自定义触发时机问询

1. Yup Schema 集成服务端验证 #

当然可以，Yup 提供的 test 方法支持异步校验，刚好能对接服务端验证逻辑。你只需要在生成字段校验规则时，给需要服务端校验的字段添加异步 test 即可。

比如修改你的 createValidationSchema 函数，假设字段配置里有serverValidate标识（或直接根据字段ID判断，比如user-id），新增服务端校验逻辑：

export const createValidationSchema = (response) => {
    const schema = {};
    response.fields.forEach(field => {  
        let validator = Yup.string();

        if (field.mandatory) {
            validator = validator.required(`${field.fieldLabel} 为必填项`);
        }   
        if (field.regex) {
            validator = validator.matches(
                new RegExp(field.regex),
                "格式不符合要求"
            );
        }

        // 新增服务端校验逻辑
        if (field.serverValidate || field.id === 'user-id') { // 按需指定需服务端校验的字段
            validator = validator.test(
                'server-check',
                `${field.fieldLabel} 校验失败`, // 默认错误信息，也可替换为API返回内容
                async (value) => {
                    if (!value) return true; // 空值先通过客户端必填校验，可按需调整
                    try {
                        const res = await fetch(`/api/validate/${field.id}`, {
                            method: 'POST',
                            body: JSON.stringify({ value })
                        });
                        const data = await res.json();
                        return data.isValid; // API返回布尔值，true则校验通过，false则失败
                    } catch (err) {
                        return false; // 请求失败时可返回false，或自定义错误逻辑
                    }
                }
            );
        }

        schema[field.id] = validator;                
    });
    return Yup.object(schema);
}

异步校验会在表单提交或字段校验触发时自动执行，你也可以通过formRef.current.trigger('user-id')手动触发该字段的全量校验（包含客户端+服务端规则）。

2. 为特定字段设置独立触发的验证 #

完全可以实现，利用react-hook-form实例的trigger、setError和clearErrors方法就能精准控制，无需依赖表单提交。

假设你的formRef已获取到react-hook-form实例，给"Check user id available"按钮绑定点击事件：

const handleCheckUserId = async () => {
    // 先触发客户端校验（必填、格式规则），不通过则直接返回
    const isValid = await formRef.current.trigger('user-id');
    if (!isValid) return;

    try {
        // 调用用户ID可用性校验API
        const userId = formRef.current.getValues('user-id');
        const res = await fetch('/api/check-user-id', {
            method: 'POST',
            body: JSON.stringify({ userId })
        });
        const data = await res.json();

        if (data.isAvailable) {
            // 校验通过，清除字段错误
            formRef.current.clearErrors('user-id');
        } else {
            // 校验失败，设置错误信息
            formRef.current.setError('user-id', {
                type: 'server',
                message: '该用户ID已被占用'
            });
        }
    } catch (err) {
        formRef.current.setError('user-id', {
            type: 'server',
            message: '校验请求失败，请稍后重试'
        });
    }
};

然后给按钮绑定方法：

<button onClick={handleCheckUserId}>Check user id available</button>

这种方式完全由点击事件触发服务端校验，错误信息会自动同步到表单字段下方（只要你的自定义Form组件正确实现了react-hook-form的错误展示逻辑）。

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