可能最简单的方法是使用ValidationObserver slot作为表单。像这样：

<ValidationObserver v-slot="{ invalid }">
  <form @submit.prevent="submit">
    <InputWithValidation rules="required" v-model="first" :error-messages="errors" />
    <InputWithValidation rules="required" v-model="second" :error-messages="errors" />
    <v-btn :disabled="invalid">Submit</v-btn>
  </form>
</ValidationObserver>

字符串
更多信息-Validation Observer

将按钮设置为:disabled:"errors.any()"将禁用按钮 after 验证。但是，当组件首次加载时，它仍然会启用。
正如@im_tsm所建议的，在mounted()方法中运行this.$validator.validate()会导致表单在启动时进行验证并立即显示错误消息。这种解决方案会导致表单看起来非常难看。此外，Object.keys(this.fields).some(key => this.fields[key].invalid);语法超级难看。
相反，当按钮被点击时运行验证器，在promise中获取有效性，然后在条件中使用它。使用这种解决方案，表单在启动时看起来很干净，但如果他们点击按钮，它将显示错误并禁用按钮。

<button :disabled="errors.any()" v-on:click="sendInvite();">
    Send Invite
</button>

个字符
验证程序API

一种禁用按钮直到所有需要的值都被填充的方法是使用一个computed属性，该属性将返回bool，无论是否分配了所有值
范例：
创建一个计算属性，如下所示：

computed: {
  isComplete () {
    return this.username && this.password && this.email;
  }
}

字符串
并将其绑定到html disabled属性：

<button :disabled='!isComplete'>Send Invite</button

型
这意味着，如果!isComplete为true，则禁用该按钮
此外，在您的情况下，您不需要两个if/else绑定按钮。您可以仅使用一个按钮来根据表单是否完成或有任何错误隐藏/显示它：

<button :disabled="errors.any() || !isCompleted" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>

型
此按钮将被禁用，直到所有字段都已填写且未发现错误

另一种方法是使用v-validate.initial

<input type="text" class="form-control" v-validate.initial="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />

字符串
这将在页面加载后执行电子邮件输入元素的验证。并在与输入交互之前禁用您的按钮。

要检查表单是否无效，我们可以添加一个computed属性，如下所示：

computed: {
    isFormInValid() {
      return Object.keys(this.fields).some(key => this.fields[key].invalid);
    },
},

字符串
现在，如果你想在用户与任何字段交互之前立即开始检查，你可以在mounted生命周期钩子中手动验证：

mounted() {
   this.$validator.validate();
}

型

或使用计算

computed: { 
    formValidated() { 
        return Object.keys(this.fields).some(key => this.fields[key].validated) && Object.keys(this.fields).some(key => this.fields[key].valid);
        } 
}

字符串
和使用

button :disabled="!formValidated" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">

型

适用于当前版本3（截至撰写本文时）。

第一步

确保表单字段可以被查看。

第二步

获取验证器示例<ValidationObserver ref="validator">的引用。

第三步

每当表单字段更改时触发验证。
下面是一个例子：

export default {
        data() {
            return {
                form: {
                    isValid: false,
                    fields: {
                        name: '',
                        phone: '',
                    }
                }
            }
        },
        watch: {
            'form.fields': {
                deep: true,
                handler: function() {
                    this.updateFormValidity();
                }
            }
        },
        methods: {
            async updateFormValidity() {
                this.form.isValid = await this.$refs.validator.validate({
                    silent: true // Validate silently and don't cause observer errors to be updated. We only need true/false. No side effects.
                });
            },
        }
    }

个字符

您可以添加计算属性

...
  computed: {
      isFormValid () {
          return Object.values(this.fields).every(({valid}) => valid)
      }
  }
  ...

字符串
然后绑定到按钮上：

<button :disabled="!isFormValid" class="btn btn-primary" type="submit">Send Invite</button>

型
我在Vee-validate版本^2.0.3上尝试了这个方法

对于任何人在这里寻找答案v4.x版本（Vue 3.0）
您可以使用useForm组合API或Form组件
对于useForm()组合API

const { meta } = useForm({ validationSchema: schema })

字符串
对于使用slot的Form组件，

<Form v-slot="{ meta }"
       :validation-schema="schema"
       @submit="onSubmit"
    >
      {{ meta.valid }}
</Form>

型