时间戳

首页 > 解决方案 > 如何检查表单是否有效并禁用 vuejs2 中的提交按钮？

vue.js - 如何检查表单是否有效并禁用 vuejs2 中的提交按钮？

问题描述

我想使用 vee-validate 检查表单是否有效。我目前正在这样做：

<button type="submit" :disabled="errors.count()">

但是，当表单已创建但尚未验证时errors.count() return 0，这意味着按钮将保持启用状态，直到用户修改字段。有什么方法可以在开始时验证它吗？

标签： vue.jsvuejs2vee-validate

解决方案

我没有找到任何 vee-validate api。所以这就是为什么我必须通过这种方式解决这个问题。

Vue.component("form", {
    computed: { 
        isFormInvalid:function () {
           return this.errors.count() > 0 || !(Object.keys(this.fields).some(key => this.fields[key].dirty));
       }
    }
});

<button type="submit" :disabled="isFormInvalid">

推荐阅读