Vue.js “vee验证”；“必需”；只有在更改字段时，验证才起作用

下面是我的代码。我的表单中有三个字段。名字，中间名，姓氏。所有这些字段都设置为必填字段。唯一的区别是“Firstname&Lastname”包含输入标记，而“Middlename”包含b-form-input标记。实际上，我的问题是，当我聚焦（模糊）这些（“Firstname&Lastname”）字段时，它会抛出一个必需的错误，但当我对（“Middlename”）字段执行相同操作时，它不会。我必须在那个（“Middlename”）字段中输入值，然后我删除了它抛出错误的值 i、 e.所需的验证仅适用于“（“中间名”）字段的“更改”。原因是什么

<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="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=""  class="form-control" placeholder="Enter your name" v-validate="'required'" name="Middlename"> </b-form-input>
                  <span v-show="errors.has('Middlename')" class="help is-danger">{{ errors.first('Middlename') }}</span>
              </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',
   created: function() {
    this.$validator.extend('Name', {
    getMessage: field => '* Enter valid ' + field + '',
    validate: value => /^[a-zA-Z]*$/.test(value)
    });
}
}
</script>

<style lang="scss" scoped>
.is-danger{
  color:  RED;
}
</style>

雇员
名字
{{errors.first（'Firstname'）}
中名
{{errors.first（'Middlename'）}
姓
{{errors.first（'Lastname'）}
从“Vue”导入Vue
从“vee validate”导入vee validate；
Vue.使用（验证）；
导出默认值{
名称：“addEmpl”，
已创建：函数（）{
此.$validator.extend（'Name'{
getMessage:field=>'*输入有效的'+field+''，
验证：值=>/^[a-zA-Z]*$/.test（值）
});
}
}
.有危险吗{
颜色：红色；
}

首先，我也是Vue.js和Vee validate的新手，所以我会得到纠正

这两个字段与middlename字段的区别在于，它是一个组件，而不是本机输入字段

本质上，您需要使组件的行为类似于输入，即发出必要的事件，以便Vee validate能够检测到它们（“输入”、“更改”、“模糊”等）

例如，如果您的组件是一个在输入端包装的div，它将是这样的：

<template>
   <div class="myClassForDiv">
      <input 
         type="text"
         class="myClass"
         @blur="$emit('blur')"
         @input="$emit('input', $event.target.value)"
      >
   </div>
</template>

<script>
   export default {
      name: "b-form-input"
   }
</script>

导出默认值{
名称：“b-form-input”
}

与问题相关的部分是

@blur=“$emit（'blur'）”

。没有这一行，VeeValidate无法获得发生模糊事件的通知，因此无法验证（我不知道VeeValidate默认会侦听哪些其他事件，但“blur”对我有效，而“focusout”则不行。对于特定于组件的特殊事件，您可以始终使用

data vv validate on

指令）

您可以参考VeeValidate库的维护人员撰写的本文。请注意，他如何创建一个组件，通过使该组件发出所有正确的事件来与VeeValidate很好地配合

---

请任何人回答这个问题