VueJS Vee验证未在输入时发生
我有一个非常基本的VueJS表单，其中我正在验证输入。
表单验证在初始调用validate form方法时进行，并且在每个输入上显示相应的验证消息。
我感到困惑的是，在表单的vee validate示例中，单击submit按钮调用验证，然后显示每个表单输入的错误消息。一旦在输入上输入了一个值（比如在name字段上），就可以清楚地看到该字段的验证错误和消息已被删除。
我提供了一个示例JSBin来说明我遇到的问题。
在“输出”面板上，单击“验证表单”按钮，您可以看到验证正在工作。但一旦您在输入字段中输入了一些文本（即名字），验证就不再有效，除非您再次明确单击“验证表单”按钮。这似乎与Vee Validate表单上的行为不同。
我是忽略了还是错过了什么？感谢任何可能导致问题的输入，因为我是VueJS的新手。
谢谢
来自JSBin的代码：
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container">
<form class="form-horizontal" @submit.prevent="validateBeforeSubmit">
<div class="form-group">
<label class="control-label col-md-2 col-sm-4" for="firstName">First Name:</label>
<div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('FirstName') }">
<input name="FirstName" v-model="firstName" v-validate:firstName.initial="'required|alpha|min:3'" class="form-control" type="text" id="firstName" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('FirstName') }" >
<span v-show="errors.has('FirstName')" class="help-block error text-danger">{{ errors.first('FirstName') }}</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-sm-4" for="lastName">Last Name:</label>
<div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('LastName') }">
<input name="LastName" v-model="lastName" v-validate:lastName.initial="'required|alpha|min:3'" class="form-control" type="text" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('lastName') }" >
<span v-show="errors.has('LastName')" class="help-block error text-danger">{{ errors.first('LastName') }}</span>
</div>
</div>
</form>
<a class="btn btn-success btn-md " v-on:click="validateBeforeSubmit">Validate Form</a>
<hr />
<pre>{{ errors }}</pre>
<pre>{{ fields }}</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.21/vee-validate.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
JS
Vue.use(VeeValidate);
var app = new Vue({
el: '#app',
data: {
firstName: null,
lastName: null
},
methods:{
validateBeforeSubmit: function(){
function onOk(){
alert('Form is OK');
}
function notOk(){
alert('Form Not OK');
}
this.$validator.validateAll().then(onOk, notOk);
}
}
});
共有1个答案
由于它在留档中，您必须进行以下更改：
- 仅放置
v-validate=“'required | alpha | min:3' - 您可以添加
数据vv delay=“100”以在100毫秒后或您认为合适的任何时间获得错误
请参阅下面的超文本标记语言：
<input name="FirstName" v-model="firstName" data-vv-delay="100" v-validate="'required|alpha|min:3'" class="form-control" type="text" id="firstName" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('FirstName') }" >
见工作箱。
-
根据经验，您永远不应该信任从最终用户收到的数据， 并且应该在充分利用之前对其进行验证。 要给 model 填充其所需的用户输入数据，你可以调用 yii\base\Model::validate() 方法验证它们。该方法会返回一个布尔值，指明是否通过验证。若没有通过，你能通过 yii\base\Model::$errors 属性获取相应的报错信息。比如， $model = new \app\mode
-
主要内容：输入验证,应用代码,实例解析AngularJS 表单和控件可以验证输入的数据。 输入验证 在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。 AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。 客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。 应用代码 < !DOCTYPE html > < html > < script src= "http:/
-
有人能帮我完成输入验证功能吗。我正在验证整数输入。问题是当用户输入多个整数my cin时。fail（）对每个整数运行，导致我的错误显示多次。让我告诉你我的意思 这是我的代码： 因此，如果用户要输入“jjj”；我的“请只输入整数”显示三次。我只想让它显示一次。我不知道怎么做。有什么想法吗？
-
如何验证输入，以便当输入为空时弹出消息
-
问题内容： 我是这个C ++世界的新手，正在尝试为数字密码编写输入验证功能。这是我到目前为止所得到的： 对于不正确的值，它工作得很好，但在有效输入时不会中断循环。知道我在这里缺少什么吗？干杯！！ James Kanze脚本的ErroR： 新代码： 使用 和 验证作为字符串 感谢所有人（尤其是James Kanze）的帮助。这件事在这里很有效。 那里还有进一步改进的空间吗？干杯！！ 问题答案： 这看