时间戳

首页 > 解决方案 > 在 Laravel 框架中执行 VueJS 组件的服务器端表单验证的惯用方式？

laravel - 在 Laravel 框架中执行 VueJS 组件的服务器端表单验证的惯用方式？

问题描述

我是 Laravel 和 VueJS 的新手。我使用 VueJS 构建了一个 HTML 表单，并且能够将有效负载提交到 Laravel 控制器，并以 JSON 对象的形式返回适当的验证错误。我将在下面展示我的一般方法，但想知道我所做的是否被认为是惯用的 Laravel+VueJS 方式？

我有一个像这样的 Laravel 路由和控制器：

Route::post('/appetizer', 'AppetizerController@store')->name('appetizer.store');

class AppetizerController extends Controller {
   public function store (Request $request) {
     $request->validate([
        "name"=>"required",
        "calories"=>"required"
     ]);
     // Process Credit Card
     // ... ... etc ... ...

     if(!$process_credit_card_success) {
        return response()->json(["errors"=>["credit_card"=>$errors_from_capital_funds_management]]);
     }
   }
}

我制作了一个完全是 VueJS 的 HTML 表单。我添加了一个提交事件，它会像这样进行 axio 调用：

window.axios.post("/appetizer",{
        "name":"Salad"
    }).then(response=>{
        console.log("success",response);
    }).catch(response=>{

        console.log("catch",response.response.data.errors);

        // Update the state/properties of my VueJS components based on response.response.data.errors
});

我故意向控制器提交了一个带有表单错误的有效负载，并成功地422 unprocessable entity在我的catch block. 该response.response.data.errors属性包含所有验证消息。因此，我将直接使用response.response.data.errors以获取我的错误消息。

这是正确的方法吗？我应该直接response.response.data.errors查看错误消息而不是其他一些抽象吗？

标签： laravelvue.js

解决方案

推荐阅读