如何使用 VueJs 和 Laravel 5 使用 On 输入答案

【问题标题】：How to use On input using VueJs and Laravel 5如何使用 VueJs 和 Laravel 5 使用 On 输入
【发布时间】：2018-01-02 19:35:05
【问题描述】：

我跟着this tutorial 工作，效果很好。但我想要的是不使用submit 按钮来检查或执行验证，我想要的是在我输入时，它现在正在验证表单。请在下面查看我的代码，或访问我上面提到的链接。

代码：

路线

<?php

Route::get('/', function () {
    return view('welcome');
});

Route::get('/article/create', 'ArticleController@showArticleCreationForm');
Route::post('/article', 'ArticleController@publish');

ArticleController

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class ArticleController extends Controller
{
    public function showArticleCreationForm(){
        return view('article.create');
    }

    public function publish(Request $request){
        $this->validate($request, [
            'title' => 'required|min:3',
            'body' => 'required|min:10'
        ]);
        if ($request->ajax()) return;

        return 'publish';
    }
}

create.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create Article</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
    <style>
        .body {
            height: 200px !important;
        }

        .error {
            color: darkred;
            margin-top: 5px;
            display: block;
        }
   </style>
</head>
<body id="app">
    <form @submit.prevent="submitForm" class="col-md-4 col-md-offset-4" action="{{ URL::to('/') }}/article" method="post">
        <h1>Create New Article</h1>
        <hr>

        {!! csrf_field() !!}

        <div class="form-group">
            <input class="form-control title" type="text" name="title" placeholder="Title" v-model="formInputs.title">
            <span v-if="formErrors['title']" class="error">@{{ formErrors['title'] }}</span>
        </div>

        <div class="form-group">
            <textarea class="form-control body" name="body" placeholder="Content" v-model="formInputs.body"></textarea>
            <span v-if="formErrors['body']" class="error">@{{ formErrors['body'] }}</span>
        </div>

        <button class="btn btn-primary" type="submit">Publish</button>
    </form>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.6.1/vue-resource.min.js"></script>
<script>
    new Vue({
        el: '#app',

        data: {
            formInputs: {},
            formErrors: {}
        },

        methods: {
            submitForm: function(e){
                var form = e.target;
                var action = form.action;
                var csrfToken = form.querySelector('input[name="_token"]').value;

                this.$http.post(action, this.formInputs, {
                  headers: {
                      'X-CSRF-TOKEN': csrfToken
                  }
                })
                .then(function() {
                      form.submit();
                })
                .catch(function (data, status, request) {
                  var errors = data.data;
                  this.formErrors = errors;
                });
            }
        }
    });
</script>
</body>
</html>

【问题讨论】：

如果您想使用 onenter 进行验证（即 ajax），那么您可能还想通过一些去抖动来进行验证。然后就好了。只需将文章创建与验证分离，并为验证创建额外的路由。
@dfsq 你好。你能明确地提供你的答案吗？

标签： ajax laravel-5 vue.js

【解决方案1】：

如果您想在输入时进行验证，您应该在您的输入上添加一个@keyup（或v-on:keyup）事件侦听器并验证它何时被触发，例如：

<input class="form-control title" type="text" name="title" placeholder="Title" v-model="formInputs.title" v-on:keyup="validate">

还有你的事件监听器：

 methods: {
      validate: function (e) {
            //e.target would have the target input which is being changed 

            _.debounce(function () {
                    var input = e.target;
                    var form = input.form;
                    var action = form.action; 
                    var csrfToken = form.querySelector('input[name="_token"]').value;

                    this.$http.post(action, this.formInputs, {
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }
                 })
                .then(function() {
                      // Don't submit
                 })
                .catch(function (data, status, request) {
                    var errors = data.data;
                    this.formErrors = errors;
                });

            }.bind(this), 500); 
      }

这个例子使用_.debounce，这是一个lodash函数，但是你可以通过setTimeout和cancelTimeout轻松编写类似的东西（lodash只是为了方便）。目的不是在每个 keyup 上触发验证，而是将其分散一点。

【讨论】：

嗨。除了这个还有其他方法吗？所以我仍然可以使用我创建的submitForm 方法吗？
您可以使用相同的方法，但如果通过，则不要调用.submit。检查更新。
ReferenceError: _ is not defined 和 TypeError: e is undefined
本示例使用 _.debounce 函数，它是一个 lodash 函数，但您可以通过 setTimeout 和 cancelTimeout 轻松编写类似的内容（lodash 只是为了方便）。目的不是在每个键位上触发验证，而是将其分散一点。我确实提到了这一点。
您需要修改您的 publish 函数以仅验证您提供的字段。但是，您应该考虑使用 Vue 验证库，例如github.com/kazupon/vue-validator