Laravel 9中如何在Vue前端展示422不可处理内容的错误信息

问题背景 #

开发注册页面时，表单数据不符合验证规则仅返回422错误，需要把具体的验证错误信息传递到Vue前端展示给用户。当前使用的验证规则代码如下：

public function rules()
{
    return [
        'first_name' => 'required|string|max:255',
        'middle_name' => 'nullable|string|max:255',
        'last_name' => 'required|string|max:255',
        'email' => 'required|email|unique:user|max:255',
        'password' => 'required|regex:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/',
    ];
}

一、Laravel后端处理 #

1. 默认错误响应配置
   如果你的注册接口放在routes/api.php里，Laravel会自动在验证失败时返回状态码422的JSON响应，其中包含所有字段的错误信息，无需额外配置。

2. 自定义错误提示（可选）
   想要更贴合业务的中文错误文本，修改resources/lang/zh-CN/validation.php：

return [
    'required' => ':attribute 为必填项',
    'email' => ':attribute 格式不正确',
    'unique' => ':attribute 已被注册',
    'max' => ':attribute 长度不能超过 :max 个字符',
    'regex' => ':attribute 需包含大小写字母、数字及特殊字符',
    // 字段名映射
    'attributes' => [
        'first_name' => '名字',
        'last_name' => '姓氏',
        'email' => '邮箱',
        'password' => '密码',
    ],
];

二、Vue前端接收并展示错误 #

在Vue组件里通过Axios捕获422错误，提取错误信息后绑定到页面：

<template>
  <form @submit.prevent="submitForm">
    <!-- 名字输入框 -->
    <div class="form-group">
      <label>名字</label>
      <input v-model="form.first_name" type="text">
      <span v-if="errors.first_name" class="text-red-500">{{ errors.first_name[0] }}</span>
    </div>
    <!-- 姓氏输入框 -->
    <div class="form-group">
      <label>姓氏</label>
      <input v-model="form.last_name" type="text">
      <span v-if="errors.last_name" class="text-red-500">{{ errors.last_name[0] }}</span>
    </div>
    <!-- 邮箱输入框 -->
    <div class="form-group">
      <label>邮箱</label>
      <input v-model="form.email" type="email">
      <span v-if="errors.email" class="text-red-500">{{ errors.email[0] }}</span>
    </div>
    <!-- 密码输入框 -->
    <div class="form-group">
      <label>密码</label>
      <input v-model="form.password" type="password">
      <span v-if="errors.password" class="text-red-500">{{ errors.password[0] }}</span>
    </div>
    <button type="submit">注册</button>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        first_name: '',
        middle_name: '',
        last_name: '',
        email: '',
        password: ''
      },
      errors: {}
    }
  },
  methods: {
    async submitForm() {
      this.errors = {} // 清空上一次的错误信息
      try {
        await axios.post('/api/register', this.form)
        // 注册成功后的逻辑，比如跳转首页
        window.location.href = '/'
      } catch (error) {
        if (error.response?.status === 422) {
          // 提取后端返回的错误信息
          this.errors = error.response.data.errors
        } else {
          // 处理其他类型的错误
          alert('服务器异常，请稍后再试')
        }
      }
    }
  }
}
</script>

如果多个组件都需要处理验证错误，可以在main.js里配置全局Axios拦截器：

import axios from 'axios'

axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 422) {
      // 这里可以统一处理错误，比如存入Vuex或全局提示
      console.log('验证错误:', err.response.data.errors)
    }
    return Promise.reject(err)
  }
)

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