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

问题描述

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

Below is my code. In the addEmployee.vue file, fields are there. Firstname , Middlename , Lastname. Among the three fields "Firtname & Lastname" has noraml tag. But "Middlename" has tag. Vee-validate "required" validation is working for the normal input tag fields but it's not working for Middlename field. What is the reason for this?

addEmployee.vue

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>

提前致谢.

推荐答案

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

you have to close b-form-input before span ;

<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-form-group(不重要)，现在它可以工作了:)

delete duplicated /b-form-group also (not critical) ,now it works :)

这篇关于Vee 验证在 <b-form-input> 中不起作用.标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！