Laravel中如何在Blade展示验证错误的JSON响应？

一、调整控制器的错误响应逻辑 #

首先把验证失败时的返回改成标准JSON格式，Laravel提供了简洁的方式自动处理验证错误，无需手动循环构建错误数组：

class RegisterController extends AuthController
{
    public function register(Request $request)
    {
        // 用validate方法自动处理验证，失败时直接返回422状态码的JSON错误响应
        $request->validate([
            'name' => 'required|string',
            'email' => 'required|email|unique:users',
            'password' => 'required|string|min:6|max:13|same:password_confirmation',
        ]);

        // 验证通过后创建用户
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => bcrypt($request->password),
        ]);

        Auth::login($user);
        $token = $user->createToken('API Token')->accessToken;

        return response()->json(['token' => $token], 201);
    }
}

注：使用$request->validate()时，Laravel会自动返回格式为{"message":"The given data was invalid.","errors":{"name":["The name field is required."],...}}的JSON响应，状态码为422，完全符合API规范。如果坚持手动实例化Validator，也可以这样返回错误：

$validator = Validator::make($request->all(), [/* 验证规则 */]);
if ($validator->fails()) {
    return response()->json([
        'message' => '验证失败',
        'errors' => $validator->errors()
    ], 422);
}

二、修改Blade视图的表单提交与错误展示逻辑 #

要捕获JSON错误，必须通过AJAX提交表单，再用JavaScript处理响应并展示错误。以下是完整实现示例：

1. 表单结构（Blade） #

<form id="registerForm">
    @csrf
    <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" name="name" id="name" class="form-control">
        <span class="text-danger error-block" id="nameError"></span>
    </div>
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email" class="form-control">
        <span class="text-danger error-block" id="emailError"></span>
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" name="password" id="password" class="form-control">
        <span class="text-danger error-block" id="passwordError"></span>
    </div>
    <div class="form-group">
        <label for="password_confirmation">确认密码</label>
        <input type="password" name="password_confirmation" id="password_confirmation" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">注册</button>
    <div class="text-danger mt-2" id="globalError"></div>
</form>

2. AJAX提交逻辑（原生JavaScript） #

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registerForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 清空之前的错误提示
        document.querySelectorAll('.error-block').forEach(el => el.textContent = '');
        document.getElementById('globalError').textContent = '';

        const formData = new FormData(form);
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

        fetch(form.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => Promise.reject(err));
            }
            return response.json();
        })
        .then(data => {
            // 注册成功后的处理，比如跳转或提示
            alert('注册成功，Token：' + data.token);
            // window.location.href = '/home';
        })
        .catch(error => {
            if (error.errors) {
                // 遍历错误，对应到输入框下方的提示区域
                Object.keys(error.errors).forEach(field => {
                    const errorEl = document.getElementById(`${field}Error`);
                    if (errorEl) errorEl.textContent = error.errors[field][0];
                });
            } else {
                document.getElementById('globalError').textContent = '服务器错误，请稍后重试';
            }
        });
    });
});

三、关键注意事项 #

• 路由配置：如果注册路由在routes/api.php中，Laravel默认会优先返回JSON响应；如果在routes/web.php，需确保请求头包含Accept: application/json（上述JS代码已设置）。
• 错误展示灵活性：可以根据需求调整错误展示方式，比如用全局列表展示所有错误，只需修改JS中的错误遍历逻辑即可。
• 状态码规范：422是RESTful API中表示验证失败的标准状态码，前端通过此状态码快速判断错误类型。

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