JavaScript如何提取Laravel 8接口校验错误并在Swal弹窗中展示

你只需在捕获到验证错误的分支中，遍历Laravel返回的errors对象，将所有错误信息拼接为带<br/>分隔的字符串传入SweetAlert2即可，修改后的代码如下：

axios.post(this.$apiAdress + '/api/administrators?token=' + localStorage.getItem("api_token"),
        self.record
      )
        .then(function (response) {
          if (response.data.status == 'success') {
            Swal.fire(
              'Sukces',
              'Rekord dodany poprawnie!@',
              'success'
            )
          } else {
            Swal.fire(
              'Błąd',
              response,
              'error'
            )
          }
          this.$router.replace({path: '/administrators/create'});
        }).catch(function (error) {
        if (error.response.data.message == 'The given data was invalid.') {
          // 拼接所有验证错误信息
          let errorMessage = ''
          const errorList = error.response.data.errors
          Object.values(errorList).forEach(fieldErrors => {
            fieldErrors.forEach(msg => {
              errorMessage += `${msg}<br/>`
            })
          })
          Swal.fire(
            'Błąd',
            errorMessage,
            'error'
          )
          window.scrollTo({top: 0});
        }
})

逻辑说明 #

• Laravel返回的验证错误全部存在error.response.data.errors对象中，键是校验失败的字段名，值是该字段对应的错误信息数组
• 用Object.values()直接提取所有错误数组，不需要硬编码字段名，后续新增验证规则也无需修改这段逻辑
• SweetAlert2默认支持HTML内容渲染，直接传入带<br/>的字符串即可实现换行效果

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