Vee 验证在标签内不起作用<b-form-input>

Question

下面是我的代码。在addEmployee.vue文件中，字段在那里。名字，中间名，姓氏。在三个字段中，"Firtname & Lastname"有noraml标签。但是"中间名"有标签。Vee-validate "必需"验证适用于普通输入标签字段，但不适用于中间名字段。这是什么原因呢？

addEmployee.vue

<template>
<b-card>
<h4 slot="header" class="card-title">Employee</h4>
<b-row>
<b-col sm="3">
<b-form-group>
<label for="name">First Name </label>
<input type="text" id=""  class="form-control" placeholder="Enter your name" v-validate="'required|Name'" name="Firstname">
<span v-show="errors.has('Firstname')" class="is-danger">{{ errors.first('Firstname') }}</span>
</b-form-group>
</b-col>
<b-col sm="3">
<b-form-group>
<label for="name">Middle Name </label>
<b-form-input type="text" id="" placeholder="Enter your name" v-validate="'required|Name'" name="Middlename"> 
<span v-show="errors.has('Middlename')" class="help is-danger">{{ errors.first('Middlename') }}</span></b-form-input>
</b-form-group>
</b-form-group>
</b-col>
<b-col sm="3">
<b-form-group>
<label for="name">Last Name </label>
<input type="text" id=""  class="form-control" placeholder="Enter your middle name" v-validate="'required|Name'" name="Lastname">
<span v-show="errors.has('Lastname')" class="help is-danger">{{ errors.first('Lastname') }}</span>
</b-form-group>
</b-col>
</b-row>
<input type="submit" value="Submit" @click="validateForm">
</b-card>
</template>
<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
name: 'addEmpl'
},
methods: {
validateForm() {
this.$validator.validateAll().then((result) => {
if(!result){
alert('not submitted')
return
}
alert('submitted')
}).catch(() => {
});
}
}
}
</script>
<style lang="scss" scoped>
.is-danger{
color:  RED;
}
</style>

提前谢谢。

Answer 1

你必须在span之前关闭b-form-input;

<b-form-group>
<label for="name">Middle Name </label>
<b-form-input type="text" id="" placeholder="Enter your name" v-validate="'required|Name'" name="Middlename"> 
<span v-show="errors.has('Middlename')" class="help is-danger">{{ errors.first('Middlename') }}</span></b-form-input>
</b-form-group>
</b-form-group>

成为：

<b-form-group>
<label for="name">Middle Name </label>
<b-form-input type="text" id="" placeholder="Enter your name" v-validate="'required|Name'" name="Middlename"> </b-form-input>
<span v-show="errors.has('Middlename')" class="help is-danger">{{ errors.first('Middlename') }}</span>
</b-form-group>

删除重复的/B 表单组也(不重要(， 现在它可以:)