一次验证多个表单

Question

我们的应用程序在一个页面上有多个相同的表单。在提交数据之前，我想通过 Vue 的单个请求来验证所有表单的输入。

我想出了以下前端部分

await this.axios({
  method: 'POST',
  url: '/data/validate/MixtureFormRequest',
  data: this.forms, // array of forms with identical JSON structure.
});

MixtureFormRequest.php

只是一个请求类，看起来像这样：

class MixtureFormRequest extends FormRequest
{
    public function rules()
    {
        return [
            'key1'         => ['required'],
            'key2'         => ['required'],
        ];
    }
}

现在棘手的部分在控制器中：

Route::post('validate/{validationClass}', function (string $validationClass, Request $request) {

    $errors = [];

    foreach($request as $form) {
        $validator = app("App\\Http\\Requests\\" . $validationClass);
        $validationInstance = $validator->make($form, $validator->rules());

        if ($validationInstance->fails()) {
            $errors[] = $validationInstance->errors();
        }
    }

    return response()->jsonSuccess(['errors' => $errors]);
});

我有上面的内容，但是

$errors

只有一个元素。它验证第一个表单，失败，然后向我发送该表单的错误。我希望每个表格都能同时出现错误。

这可能吗？

Answer 1

我无法通过一次发送所有表格来实现此目的。相反，我创建了多个请求，如下所示：

        async $validateForms(controller, forms) {
            const formsToValidate = forms.map((form) => {
                return this.$axios({
                    method: 'POST',
                    url: `/data/validate/${controller}`,
                    data: form,
                });
            });

            const results = await Promise.allSettled(formsToValidate);

            return results.map(({ reason, status }) => {
                if (status === 'rejected') {
                    return reason.data.errors;
                } else {
                    return {};
                }
            });
        },

在后端，它变得非常简单：

    Route::post('validate/{validationClass}', function (string $validationClass, Request $request) {
        app("App\\Http\\Requests\\" . $validationClass);
        return response()->jsonSuccess([]);
    });

这允许前端控制针对该特定请求使用哪个验证类。