使用Vee-validate禁用按钮,直到表单填写正确

Question

我想禁用我的提交按钮,直到我的表单填写正确,这是我到目前为止:

<form>
   <input type="text" class="form-control" v-validate="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />
   <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
   <button v-if="errors.any()" disabled="disabled" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
   <button v-else="errors.any()" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
</form>

在我开始输入值之后,上面只打印错误消息并禁用我的提交按钮.在开始与输入交互之前,我需要从一开始就禁用它,这样我就不能发送空字符串了.

另一个问题是,是否有比使用更好的方法v-if？

编辑:

 userCreate: {
        customerId: null,
        userPrincipalName: '',
        name: 'unknown',
        isAdmin: false,
        isGlobalAdmin: false,
        parkIds: []
    }

Answer 1

禁用按钮直到所需的所有值都被填充的一种方法是使用一个计算属性,如果分配了所有值,它将返回bool

例:

创建一个这样的计算属性:

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

并将其绑定到html disabled属性:

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

这意味着,如果!isComplete为true ,则禁用该按钮

此外,在您的情况下,您不需要两个if/else-bound按钮.您只能使用一个来隐藏/显示表单是否已完成或有任何错误:

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

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

Answer 2

可能最简单的方法是使用ValidationObserver表单的插槽。像这样：

<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>

更多信息 -验证观察者

Answer 3

将按钮设置为:disabled:"errors.any()"会在验证后禁用按钮。但是，在首次加载组件时，仍将启用它。

如@im_tsm所示，this.$validator.validate()在mounted()方法中运行会导致表单在启动时进行验证并立即显示错误消息。该解决方案将使表单看起来非常难看。而且，Object.keys(this.fields).some(key => this.fields[key].invalid);语法非常丑陋。

而是在单击按钮时运行验证器，在promise中获取有效性，然后在有条件的情况下使用它。使用此解决方案，表单在启动时看起来很干净，但是如果他们单击按钮，它将显示错误并禁用按钮。

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

sendInvite() {
    this.$validator.validate().then(valid=> {
        if (valid) {
            ...
        }
    })
}

验证器API