使用 axios vuejs 和 laravel 验证表单

Posted

技术标签:

【中文标题】使用 axios vuejs 和 laravel 验证表单【英文标题】:Validating forms with axios vuejs and laravel 【发布时间】:2018-12-23 07:17:39 【问题描述】:

我正在尝试将一些表单数据发送到我的后端,但使用 Laravel 进行的验证没有返回 422 状态的错误。

Axios

简单的 axios 向 URL 发布请求,如果我们在请求周期中发现错误,则希望得到响应。

axios.post(this.formURL, formData)
  .then((response) => 
    console.log(response)
  )
  .catch((err) => 
    console.log(err)
  )

Laravel

我已经设置了 Laravel Validation 来验证一些表单输入,如果验证失败则返回 422。

try 
      $this->validate(request(), [
        'chapter_id' => 'required',
        'brother_id' => 'required'
      ]);

      Minute::forceCreate(request());

      return response()->json([
          'status' => 'success',
          'message'    => 'Minute Created',
      ], 201);
  
  catch (ValidationException $exception) 
      return response()->json([
          'status' => 'error',
          'message'    => 'Error',
          'errors' => $exception->errors(),
      ], 422);

回应

给出了响应,但是当我尝试将其控制台输出时,我在控制台中得到 undefined


   "status":"error",
   "message":"Error",
   "errors":
      "brother_id":[
         "The brother_id field is required."
      ],
      "chapter_id":[
         "The chapter_id field is required."
      ]
   

我在这里https://github.com/axios/axios/issues/960#issuecomment-398269712 遇到了这个问题,但使用他们的解决方法无法解决这个问题。有没有人遇到过这个问题?这可能是身份验证关系(不太可能),这是我实施的最后一件事。

分辨率

此问题已解决。在实现 axios 拦截器以捕获身份验证错误时,我没有将错误返回给 Promise。

  axios.interceptors.response.use(null, (error) => 
    if ( error.response.status == 401 ) 
      store.commit('logout')
      router.push('/login')
    

    return Promise.reject(error)
  )

return Promise.reject(error) 丢失。 感谢你们的帮助!

【问题讨论】:

【参考方案1】:

我认为消息很清楚(“chapter_id 字段是必需的。”)。看来问题不是axios的结果,而是相关的数据值没有传到服务器上。请检查数据是否通过使用传输到服务器

return $ request;

服务器端的命令(控制器的启动)。如果数据没有传输,请仔细检查前端。如果传输数据,请尝试更改范围。

try 
  $this->validate(request(), [
    'chapter_id' => 'required',
    'brother_id' => 'required'
  ]);

catch (ValidationException $exception) 
  return response()->json([
      'status' => 'error',
      'message'    => 'Error',
      'errors' => $exception->errors(),
  ], 422);

Minute::forceCreate(request());

return response()->json([
     'status' => 'success',
     'message'    => 'Minute Created',
], 201);

所以调试它。

【讨论】:

我收到了正确的回复i.stack.imgur.com/V49rw.png 我编辑了我的答案,请试试这个。并与我们分享服务器响应。 如果您将我的回答标记为有效,我会很高兴。快乐编码@sogeniusio

以上是关于使用 axios vuejs 和 laravel 验证表单的主要内容,如果未能解决你的问题,请参考以下文章

Axios、Laravel 和 VueJS 中的删除方法

在Laravel护照,vueJS和Axios中未经授权获得401

Vuejs Axios POST 请求从 Laravel 后端获取 HTTP422 错误

VueJS、Axios、Laravel - 捕获错误

使用 axios.put [laravel + vuejs 3] 更新模式内的数据时出现错误 422

如何使用 VueJS 和 axios 将从 API 获取的数据填充到 Laravel 中的选择选项中?