我可以将表单验证连接到 "submit" 按钮吗？

Question

使用 element-ui，表单验证相当不错，所以我希望它能非常直接地指向 "wire up" 表示表单是否对 "submit"按钮。

我当然可以编写一个验证函数并将其附加到每个字段上的适当事件，但这似乎是重复的。

例如，每个规则都有一个触发器，告诉它何时评估规则（例如模糊、更改）。如果我必须将一个事件附加到每个反映相同触发器的 el-input，那对我来说很脆弱。

例如，这些规则在模糊或变化时触发。

    rules: {
        username: [
            {
                required: true,
                message: "please enter user name",
                trigger: "blur"
            },
            {
                min: 3,
                max: 32,
                message: "length must be 3 to 32 characters",
                trigger: "blur"
            }
        ],
        password: [
            {
                required: true,
                message: "please enter password",
                trigger: "change"
            }
        ]
    }

我错过了什么吗？有没有办法优雅地做到这一点？

Answer 1

这是我最后做的：

我使用 vue.js 'watch' 工具来监控表单数据（关键是 'deep' 被设置为监控字段值）和运行 a检查它，更新禁用提交按钮的变量：

数据部分包含我的表单模型和启用变量：

data() {
    return {
        loginForm: {
            username: "",
            password: ""
        },
        formValid: false,
        ...

附在按钮上的：

<el-button @click="submit" type="primary" :disabled="!formValid">Log In</el-button>

以及非常通用的验证码（并且可以移至插件中）：

watch: {
  loginForm: {
    handler(){
      this.checkForm();
    },
    deep: true
  }
},
methods: {
    checkForm() {
        let fields = this.$refs.loginForm.fields;
        if (fields.find((f) => f.validateState === 'validating')) {
            setTimeout(() => {
                this.checkForm();
            }, 100);
        }
        this.$data.formValid = fields.every(f => {
            let valid = f.required && f.validateState === "success";
            let notErroring = !f.required && f.validateState !== "error";
            return valid || notErroring;
        }, true);
        console.log('valid:', this.$data.formValid);
    },
    ...

（最后一部分来自另一个非常有用的。它巧妙地处理了飞行中验证的可能性）

我可以将表单验证连接到 "submit" 按钮吗？

Can I wire form validation to the "submit" button?

validation

vue.js

vuejs2

element-ui