Question

我希望能够将laravel错误信息分成几部分。

假设我有一个包含3个部分的保险单页面

驱动程序详细信息

汽车详细信息

政策详细信息

我正在使用这样的laravel请求

'driver_name' => 'required',
'address_line_1' => 'required',
'address_line_2' => 'required',
'address_line_3' => 'required',
'postcode' => 'required',

在使用这样的输入请求进行验证时，我希望能够标记某些输入错误，以便我可以在每个部分的顶部显示错误消息，而不是其中包含所有错误的1个巨型错误块。 / p>

在请求中，我如何将其发送回带有段标签的

'driver_name'=>'必填| section：driverDetails'

要拆分错误？

如果无法标记laravel错误消息，那么实现此目的的最佳实践是什么？

Answer 1

您可以使用Vue.js和axios验证并显示错误。在控制器中有一个名为/ validate-data的路由来验证数据。

app.js文件：

       import Vue           from 'vue'
        window.Vue = require('vue');
        window.axios = require('axios');

        window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

        let token = document.head.querySelector('meta[name="csrf-token"]');

        if (token) {
            window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
        } else {
            console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
        }

             class Errors {
                constructor() {
                    this.errors = {};
                }

                get(field) {
                    if (this.errors[field]) {

                        return this.errors[field][0];
                    }
                }

                record(errors) {
                    this.errors = errors;
                }

                clear(field) {
                    delete this.errors[field];
                }

                has(field) {
                    return this.errors.hasOwnProperty(field);
                }

                any() {
                    return Object.keys(this.errors).length > 0;
                }
            }

            new Vue({
             el: '#app',

                data:{
               errors: new Errors(),
              model: {
    driver_name: '',
    address_line1: '',
    address_line2: ''
    },
            },

        methods: {
          onComplete: function(){
              axios.post('/validate-data', this.$data.model)
                  // .then(this.onSuccess)
                  .catch(error => this.errors.record(error.response.data.errors));
           },
}
        });

使用控制器中的方法创建一个名为/ validate-data的路由，执行标准验证

$this->validate(request(), [
'driver_name' => 'required',
'address_line_1' => 'required',
'address_line_2' => 'required',
'address_line_3' => 'required',
'postcode' => 'required'
]

然后使用与vue.js数据模型字段相对应的v-model在视图文件中创建输入。在其下，添加一个带有错误类（例如，基本的红色错误样式）的跨度，该类仅在存在错误的情况下显示。例如：

<input type="text" name="driver_name" v-model="model.driver_name" class="input">
<span class="error-text" v-if="errors.has('driver_name')" v-text="errors.get('driver_name')"></span>

请不要忘记在视图文件的页脚中包含app.js文件。记住要包括标签，然后运行npm run watch来编译vue代码。这将使您可以验证其输入字段下的所有错误。

忘记添加，有一个带有@ onclick =“ onComplete”的按钮来运行validate方法。

Answer 2

每个验证规则都会导致$ errors 因此，如果您有下一条规则：

'driver_name'=>'必填'，

您只需在刀片的driver_name字段顶部输出错误

function onScroll(velocity) {
  var win = $(window)  
  $(win).on('wheel', function(event) {
    event.preventDefault()
    var direction = event.originalEvent.deltaY > 0? 'down': 'up';    
    var position = win.scrollTop();

    if (direction === 'up') {
        $('html, body').animate({
            scrollTop: (position + velocity)
        }, 40);
    }
    else if (direction === 'down') {
        $('html, body').animate({
            scrollTop: (position - velocity)
        }, 40);
    }
  })
}
onScroll(70);

您可以参考文档here

将Laravel请求错误分为几部分

2 个答案: