13

我想禁用我的提交按钮，直到我的表单被正确填写，这就是我目前所拥有的：

<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: []
    }
4

8 回答 8

14

可能最简单的方法是将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>

更多信息 -验证观察员

于 2020-04-25T21:33:15.120 回答
12

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

this.$validator.validate()正如@im_tsm 建议的那样，在该方法中运行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

于 2019-03-01T15:34:31.433 回答
9

在填充所需的所有值之前禁用按钮的一种方法是使用计算属性，如果所有值都已分配，则该属性将返回 bool

例子：

像这样创建一个计算属性：

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

并将其绑定到 htmldisabled属性，如下所示： 

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

在填写所有字段且未发现错误之前，此按钮将被禁用

于 2017-11-08T11:31:07.413 回答
2

另一种方法是使用 v-validate。最初的

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

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

于 2018-11-26T20:00:31.217 回答
2

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

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

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

mounted() {
   this.$validator.validate();
}
于 2018-12-21T11:41:26.280 回答
2

或使用计算

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">
于 2018-06-28T12:59:58.110 回答
1

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

步骤1

确保可以查看表单字段。

第2步

获取对验证器实例的引用： <ValidationObserver ref="validator">.

第 3 步

每当表单字段更改时，静默触发验证。

这是一个例子：

     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.
                });
            },
        }
    }

<button :disabled="form.isValid">
    Submit
</button>
于 2020-04-30T17:04:59.190 回答
0

您可以添加计算属性

  ...
  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 上试试这个

于 2020-11-24T11:00:43.857 回答