laravel InertiaJS -验证多步骤表单-使用Interia或Axios?

ddhy6vgd  于 2023-11-20  发布在  iOS
关注(0)|答案(1)|浏览(109)

我使用InertiaJS和Laravel创建了一个Web应用程序,并创建了一个多步骤表单。对于表单,我使用了Inertia helper useForm。现在,当单击按钮进入下一步时,我想向验证控制器发送表单的验证请求。我问自己如何才能实现这一点。
首先,我想我可以这样做:

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

字符串
这似乎发送了一个请求,但端点正在发送302响应,根据文档,据我所知,我需要做一个重定向-https://inertiajs.com/redirects/https://inertiajs.com/forms#submitting-forms
然后我想,我可以使用一个经典的axios调用。这里我有一个问题,我提交整个表单到验证表单请求,因此我需要这样的验证规则:

return match ($this->input('step')) {
    '0' => [
        'form.company' => ['required', 'string', 'max:255'],
    ],
    default => [
        // Default rules if 'section' doesn't match any case.
    ],
};


现在的问题是,响应有一个名为“form.company“的键,但响应必须只是“company”,因为我通过Inertia表单form.errors.company访问了这样的错误。
因此,在我的axios调用中,我需要将响应中的错误Map到Inertia对象的形式错误:

catch((error) => {
    form.errors = error.response.data.errors;
});


但正如我所说,这不起作用,因为键没有嵌套到:

"form" : {
    "company":


它是:

"form.company"


现在我问自己这里的正确解决方案是什么?我应该使用另一种惯性方法,还是axios是正确的方法?当使用axios时,我可以以某种方式返回“company”作为键而不是form.company吗?或者我需要在JS端解析响应,手动拆分键form.company,等等?
有人能帮忙吗?

czq61nw1

czq61nw11#

我也面临着同样的问题,我唯一能想到的解决办法就是使用一个库来验证前端的表单,比如https://vuelidate-next.netlify.app/,(长度检查,正则表达式,必填字段,如果当前的tone还没有完成,则不允许用户进行下一步),然后进行后端验证,因为对于相同的规则+任何不能在前端检查的内容-结束像用户名存在.

相关问题