将 Laravel 请求错误拆分为多个部分

Question

我希望能够将我的 laravel错误消息拆分为多个部分。

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

驱动程序详细信息

汽车详情

政策详情

我正在使用这样的拉拉维尔请求

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

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

在请求中，我将如何使用类似 section 标签将其发回

'driver_name' => '必需|部分：驱动程序详细信息'

拆分错误？

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

Answer 1

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

应用程序.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 模型在视图文件中创建输入。在其下方，添加一个具有错误类(例如基本红色错误样式(的范围，该范围仅在错误存在时才显示。例如：

<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" 的 buttton 来运行验证方法。

Answer 2

您可以获取每个验证规则的$errors 因此，如果您有下一个规则：

"driver_name" => "必需"，

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

@if ($errors->has('driver_name'))
<div class="error">{{ $errors->first('driver_name') }}</div>
@endif
<input type="text" name="driver_name">

您可以在此处参考文档