Vue.js + Laravel 如何实现输入数组验证并在表单展示验证错误

第一步：Laravel 端数组验证规则配置 #

首先在 Laravel 的控制器或表单请求类中定义数组验证规则，如果你提交的是类似 items[*][name]、items[*][price] 这种结构的数组，规则写法如下：

• 如果你用控制器直接验证：

// 示例接口方法
public function store(Request $request)
{
    $validated = $request->validate([
        'items' => 'required|array|min:1',
        'items.*.name' => 'required|string|max:255',
        'items.*.price' => 'required|numeric|min:0',
        // 其他字段规则按需补充
    ]);

    // 验证通过后的业务逻辑
}

验证不通过时 Laravel 会自动返回 422 状态码，错误信息结构为：

{
  "message": "The given data was invalid.",
  "errors": {
    "items.0.name": ["第1个项目的名称不能为空"],
    "items.1.price": ["第2个项目的价格必须是数字"]
  }
}

如果需要中文错误提示，可以在 Laravel 项目中安装中文语言包，或者自定义验证消息。

第二步：Vue 端接收并存储错误信息 #

可以在 axios 的响应拦截器里统一捕获 422 状态码的错误，也可以在单独的请求回调中处理：

// 示例表单提交逻辑
async submitForm() {
  try {
    await axios.post('/api/你的接口路由', this.formData)
    // 提交成功后的跳转、提示等逻辑
  } catch (error) {
    if (error.response.status === 422) {
      // 将后端返回的错误信息存入本地响应式变量
      this.formErrors = error.response.data.errors
    }
  }
}

第三步：前端表单错误展示 #

在模板中对应数组字段的位置匹配错误信息展示即可：

<template>
  <div v-for="(item, index) in formData.items" :key="index">
    <input v-model="item.name" type="text" placeholder="项目名称">
    <!-- 展示对应索引项的name字段错误 -->
    <span v-if="formErrors?.[`items.${index}.name`]" class="error-text">
      {{ formErrors[`items.${index}.name`][0] }}
    </span>

    <input v-model="item.price" type="number" placeholder="项目价格">
    <!-- 展示对应索引项的price字段错误 -->
    <span v-if="formErrors?.[`items.${index}.price`]" class="error-text">
      {{ formErrors[`items.${index}.price`][0] }}
    </span>
  </div>
</template>

补充：如果要提交前清空上一次的错误，只需要在提交方法开头把 formErrors 重置为空对象即可。

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