Laravel 使用 vue js 验证

Question

我想 post ajax 使用 vue-resource this.$http.post 请求。如果我通过了所有验证规则，它工作得很好，但如果它失败了，我想得到一些验证。到目前为止，如果我不填写一些输入字段，我会不断收到 500 错误。我很难调试错误，因为它没有出现在网络选项卡上。

这是我到目前为止所做的

//my modal component
<script>
export default {
    props: ['show'],

    data() {
        return {
            input: {
                id: '',
                name: '',
                address: '',
                email: ''
            },
            errorInputs: {}
        }
    },

    methods: {
        createStudent() {
            this.$http.post('/students', this.$data.input)
                .then((response) => {
               alert('added new row!)
            }, (response) => {
                console.log(response.data);
            });
        }
      }
   }
</script>

// my controller

public function store(Request $request) {
    $validator = $this->validate($request,[
        'id' => 'required',
        'name' => 'required|unique:students',
        'email' => 'required|unique:students|email',
        'address' => 'required',
    ]);

    if($validator->passes()){
        Student::create($request->all());

        return response()->json([], 201);
    }

    $errors = json_decode($validator->errors());

    return response()->json([
        'success' => false,
        'message' => $errors
    ],422);
}

如有任何帮助和参考，我们将不胜感激。我正在使用 laravel 5.3 和 vue js 2

Answer 1

$this->validate() returns 422 错误响应以及验证错误，因此您应该在 then() 第二次回调中得到这些错误（就像您现在所做的那样）。你的 vue 组件体应该是这样的：

{
    data() {
        // ...
    },
    createStudent() {
        this.$http
            .post('/students', this.input)
            .then(this.handleSuccess, this.handleError)
    },
    handleSuccess(res) {
        alert('student created')
    },
    handleError(res) {
        if (res.status === 422) {
            this.errorInputs = res.body
        } else {
            alert('Unkown error!')
        }
    }
}

记得将 v-model="input.fieldName" 属性添加到您的输入中。

Answer 2

请记住将您的会话令牌与您的 post 一起包含在内，除非您当然要为该路由禁用 csrf 令牌。

因为 Laravel 5.1 你可以在你的 verifytoken 中间件中禁用它

 <?php namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as ...

class VerifyCsrfToken extends ...    {
  protected $except = [
    'payment/*',
  ];
}

Laravel 使用 vue js 验证

Laravel Validation with vue js

laravel

vue.js

vue-resource

laravel-5.3