Laravel 返回验证错误 Ajax - Javascript

在使用 Laravel 进行表单验证时，如果出现了错误，我们可以使用 Ajax 技术返回错误信息，从而提高用户体验。本文将介绍如何在 Laravel 中返回验证错误信息。

向控制器发送 Ajax 请求

在处理表单数据时，我们需要使用 axios 或 jQuery 发送 Ajax 请求，例如：

axios.post('/form', {
  name: 'John',
  email: 'john@example.com'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error.response.data);
});

Laravel 控制器验证数据

在 Laravel 的控制器中，我们需要进行表单验证，如果验证失败，我们需要返回错误信息。我们可以使用以下方法进行验证：

$request->validate([
    'name' => 'required',
    'email' => 'required|email',
]);

如果验证失败，我们可以使用以下方法返回错误信息：

if ($validator->fails()) {
    return response()->json(['errors' => $validator->errors()], 422);
}

其中，422 是 HTTP 响应码，表示发生了验证错误。

处理 Ajax 请求返回的错误信息

在进行 Ajax 请求时，我们可以通过 catch() 方法获取错误信息，例如：

.catch(error => {
  console.log(error.response.data);
  // {
  //    "errors": {
  //        "name": [
  //            "The name field is required."
  //        ],
  //        "email": [
  //            "The email field is required.",
  //            "The email must be a valid email address."
  //        ]
  //    }
  // }
});

接着，我们可以根据返回的错误信息，动态地将错误信息显示在表单上：

let errors = error.response.data.errors;
for (let field in errors) {
  let message = errors[field].join(', ');
  let input = document.querySelector(`[name="${field}"]`);
  // 显示错误信息
  input.nextElementSibling.innerText = message;
}

整体代码

axios.post('/form', {
  name: 'John',
  email: 'john@example.com'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error.response.data);
  let errors = error.response.data.errors;
  for (let field in errors) {
    let message = errors[field].join(', ');
    let input = document.querySelector(`[name="${field}"]`);
    // 显示错误信息
    input.nextElementSibling.innerText = message;
  }
});

$request->validate([
    'name' => 'required',
    'email' => 'required|email',
]);

if ($validator->fails()) {
    return response()->json(['errors' => $validator->errors()], 422);
}

总结

本文介绍了 Laravel 返回 Ajax 表单验证错误信息的方法，并提供了代码示例。通过本文的学习，读者可以优化自己的表单验证体验。