InertiaJS多步骤表单验证：用Inertia还是Axios？

问题背景 #

基于InertiaJS和Laravel开发多步骤表单，采用useForm助手实现表单逻辑。点击下一步按钮提交表单到验证控制器时遇到两个问题：

1. 使用Inertia form的post方法请求，接口返回302重定向，不符合校验需求
2. 改用Axios请求后，Laravel验证规则中定义的form.company会返回键为form.company的错误，但Inertia form需要通过form.errors.company访问错误，键名不匹配导致无法正确绑定

可行解决方案 #

方案一：修复Inertia form post的302问题 #

302重定向是因为Laravel验证失败后默认触发重定向逻辑，而Inertia需要接收422状态码的错误响应。只需调整控制器的验证逻辑即可：

后端控制器修改

public function validateStep(Request $request)
{
    $rules = match ($request->input('step')) {
        '0' => [
            'company' => ['required', 'string', 'max:255'],
        ],
        // 其他步骤的验证规则
        default => [],
    };

    // Laravel会自动在验证失败时返回422响应，Inertia可直接捕获
    $request->validate($rules);

    // 验证通过后返回成功响应
    return response()->json(['success' => true]);
}

前端代码调整

无需嵌套form.前缀，直接传递字段名即可，Inertia会自动将错误绑定到form.errors：

form
    .transform((data) => ({
        ...data,
        step: activeStepIndex.value,
    }))
    .post(route('setup.validate'), {
        preserveState: true,
        preserveScroll: true,
    });

方案二：Axios请求时适配错误键 #

如果必须使用Axios，可通过两种方式解决键名不匹配问题：

方式1：后端修改验证规则键名

去掉规则中的form.前缀，直接使用字段名：

return match ($this->input('step')) {
    '0' => [
        'company' => ['required', 'string', 'max:255'],
    ],
    default => [],
};

前端请求时直接传递字段数据（不要嵌套在form对象中），返回的错误键即为company，可直接赋值给form.errors：

axios.post(route('setup.validate'), {
    ...form.data,
    step: activeStepIndex.value,
})
.then(() => {
    // 验证通过后的逻辑
})
.catch((error) => {
    form.errors = error.response.data.errors;
});

方式2：前端手动转换错误键

如果后端必须保留form.前缀，可在前端捕获错误后转换键名：

.catch((error) => {
    const transformedErrors = {};
    Object.keys(error.response.data.errors).forEach(key => {
        // 移除"form."前缀
        const newKey = key.replace(/^form\./, '');
        transformedErrors[newKey] = error.response.data.errors[key];
    });
    form.errors = transformedErrors;
});

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