【发布时间】：2017-01-08 12:52:58
【问题描述】：
我正在使用vuejs 2 并使用vee-validate 2.0.0-beta.18 进行验证。但是当我调用this.$validator.validateAll() 时遇到问题，它只验证一个字段。这是jsfiddle。
这是html：
<body>
<div id="app">
<form @submit.prevent="submitForm">
<label>Email</label>
<input type="text" placeholder="Email" class="form-control"
v-model="email" name="email"
v-validate data-vv-rules="required|email">
<p v-if="errors.has('email')" class="text-danger">{{ errors.first('email') }}</p>
<label>Name</label>
<input type="text" placeholder="Name" class="form-control"
v-model="name" name="name"
v-validate data-vv-rules="required">
<p v-if="errors.has('name')" class="text-danger">{{ errors.first('name') }}</p>
<label>City</label>
<select class="form-control"
v-model="city" name="city"
v-validate data-vv-rules="required">
<option value="">-- Select One --</option>
<option value="c.id" v-for="c in cities">{{ c.name }}</option>
</select>
<p v-if="errors.has('city')" class="text-danger">{{ errors.first('city') }}</p>
<button>Submit</button>
</form>
<pre>{{ errors }}</pre>
<pre>{{ fields }}</pre>
</div>
</body>
这是js：
Vue.use(VeeValidate);
new Vue({
el: '#app',
data: {
cities: [{
id: 1,
name: 'Jakarta'
}, {
id: 2,
name: 'Depok'
}],
name: '',
city: '',
email: ''
},
methods: {
submitForm: function() {
this.$validator.validateAll().then(function(success) {
if (!success) return;
alert("All good")
})
}
}
})
为什么只验证电子邮件字段？
【问题讨论】：
-
当我使用上面提供的链接在 jsfiddle 中打开代码时，我发现验证在 jsfiddle 中按预期工作。当您开始与 UI 元素交互时，验证似乎按预期工作。你能详细说明一下确切的问题吗？
-
我明白了你的问题。当您加载页面并单击提交时，它不起作用。
标签： javascript validation vuejs2 vue.js