来自 vue 组件的 laravel 表单请求的 422 响应中没有错误消息

Question

我正在尝试使用 axios 提交表单请求，对其进行验证，如果验证失败则返回错误。问题是，当我提交表单时，没有返回错误消息让我在客户端显示。这是HTTP 请求和 vue 组件：

         <div class="card">
            <div class="card-header">
                    <h4>Information</h4>
            </div>

        <div class="card-body">
            <p v-if='!isEditMode'><strong>Name:</strong> {{businessData.name}}</p> 
            <div class="form-group" v-if='isEditMode'>
                <strong><label for="business-name">Name</label></strong> 
                <input class="form-control" name="business-name"  v-model='businessData.name'>
            </div>
            <p v-if='!isEditMode'><strong>Description:</strong> {{businessData.description}}</p> 
            <div class="form-group" v-if='isEditMode'>
                <strong><label for="business-description">Description</label></strong> 
                <textarea class="form-control normal" name="business-description" 
                    placeholder="Enter your services, what you sell, and why your business is awesome" 
                    v-model='businessData.description'></textarea>
            </div>
        </div>

    </div>

    <div class="card">
        <h4 class="card-header">Address Information</h4>
        <div class="card-body">

            <p v-if="!isEditMode"><strong>Street Address: </strong> {{businessData.street}}</p>
            <div class="form-group" v-if='isEditMode'>
                <strong><label for="business-street">Street Address: </label></strong> 
                <input type="text" class="form-control" name="business-street"  v-model='businessData.street' placeholder="1404 e. Local Food Ave">
            </div>
            <p v-if="!isEditMode"><strong>City: </strong> {{businessData.city}}</p>
            <div class="form-group" v-if='isEditMode'>
                <strong><label for="business-city">City: </label></strong> 
                <input class="form-control" type="text" name="business-city"  v-model='businessData.city'>
            </div>
            <p v-if="!isEditMode"><strong>State: </strong> {{businessData.state}}</p>
            <div class="form-group" v-if='isEditMode'>
                <strong><label for="business-state">State: </label></strong> 
                <select class="form-control" name="business-state"  id="state" v-model="businessData.state" >...</select>                                 
            </div>
            <p v-if="!isEditMode"><strong>Zip: </strong> {{businessData.zip}}</p>
            <div class="form-group" v-if='isEditMode'>
                <strong><label for="business-zip">Zip: </label></strong> 
                <input class="form-control" type="text" maxlength="5" name="business-zip"  v-model='businessData.zip'>
            </div>

        </div>
    </div>
    <div class="card">
        <h4 class="card-header">Contact Information</h4>
        <div class="card-body">
            <p v-if="!isEditMode"><strong>Phone: </strong> {{businessData.phone}}</p>
            <div class="form-group" v-if='isEditMode'>
                <strong><label for="business-phone">Phone: </label></strong> 
                <input class="form-control" type="tel" name="business-phone"  v-model='businessData.phone'>
            </div>
            <p v-if="!isEditMode"><strong>Email: </strong> {{businessData.email}}</p>
            <div class="form-group" v-if='isEditMode'>
                <strong><label for="business-Email">Email: </label></strong> 
                <input class="form-control" type="email" name="business-email"  v-model='businessData.email'>
            </div>
        </div>
    </div>
</div>
<script>
export default {
    data () {
        return {
            isEditMode: false,
            businessData: this.business,
            userData: this.user,
            errors: []
        }
    },
    props: {
        business: {},
        user: {},
        role: {}
    },
    //Todo - Institute client side validation that prevents submission of faulty data
    methods: {
        validateData(data) {

        },
        saveBusinessEdits () {
            axios.put('/businesses/' + this.business.id , {updates: this.businessData})
            .then(response => {
                console.log(response.data)
                // this.businessData = response.data;
                this.isEditMode = false;
            })
            .catch (response => {
                console.log(response.data)
                this.isEditMode = false;
            })
        },
        saveUserEdits () {
            axios.put('/profile/' + this.user.id , {updates: this.userData})
            .then(response => {
                console.log(response.data)
                this.userData = response.data;
                this.isEditMode = false;
            })
            .catch (response => {
                console.log(response)
                this.isEditMode = false;
            })
        }
    }
}

路线

Route::put('/businesses/{id}', 'BusinessesController@update');

BusinessController 和更新功能

  public function update(BusinessRequest $request, $id)
{

    $business = Business::find($id)->update($request->updates);


    $coordinates = GoogleMaps::geocodeAddress($business->street,$business->city,$business->state,$business->zip);
        if ($coordinates['lat']) {
            $business['latitude'] = $coordinates['lat'];
            $business['longitude'] = $coordinates['lng'];
            $business->save();
            return response()->json($business,200);
        } else {                    
            return response()->json('invalid_address',406);
        }
        $business->save();
        return response()->json($business,200);
}

和BusinessRequest 类

/**
 * Get the validation rules that apply to the request.
 *
 * @return array
 */
public function rules()
{
    return [
        'business-name'=> 'required|string|max:255',
        'business-description'=> 'required|string',
        'business-phone' => 'nullable|phone|numeric',
        'business-email' => 'nullable|email',
        'business-street'=> 'required|string',
        'business-city' => 'required|string',
        'business-state' => 'required|string|max:2',
        'business-zip' => 'required|min:5|max:5|numeric', 
    ];
}

public function messages() {
    return [
        'business-zip.min:5' =>'your zip code must be a 5 characters long',
        'business-email.email'=>'your email is invalid',
        'business-phone.numeric'=>'your phone number is invalid',
    ];
}
}

我不明白为什么即使输入有效数据，它也会以 422 响应进行响应，并且绝对没有错误消息。由于这是 laravel 5.6，“web”中间件在web.php文件中的所有路由中都是自动的。所以这不是问题。谁能帮我规范验证行为？

Answer 1

在 Laravel 中，422状态码意味着表单验证失败。

使用axios，传递给then和catch方法的对象其实是不一样的。要查看错误的响应，您实际上需要具有以下内容：

.catch (error => {
    console.log(error.response)
    this.isEditMode = false;
})

然后要获取错误（取决于您的 Laravel 版本），您将有以下内容：

console.log(error.response.data.errors)

展望未来，可能值得一看Spatie 的 form-b​​ackend-validation 包