我按照本教程进行操作，效果很好。但我想要的是不使用submit按钮来检查或执行验证，我想要的是在我打字时，它现在正在验证表单。请参阅下面的代码，或访问我上面提到的链接。
代码：
路线
<?php
Route::get('/', function () {
return view('welcome');
});
Route::get('/article/create', 'ArticleController@showArticleCreationForm');
Route::post('/article', 'ArticleController@publish');
文章控制器
<?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';
}
}
创建.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>
如果你想在输入时进行验证，你应该在你的输入上添加一个@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);
}
这个例子使用_.debouncewhich 是一个 lodash 函数，但你可以很容易地通过setTimeoutand自己编写类似的东西cancelTimeout（lodash 只是为了方便）。目的是不是在每个 keyup 上触发验证，而是将它分散一点。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句