我可以将表单验证连接到“提交”按钮吗？

Posted 2023-03-06

【中文标题】我可以将表单验证连接到“提交”按钮吗？

【英文标题】：Can I wire form validation to the "submit" button?

【发布时间】：2018-06-22 23:31:32

【问题描述】：

使用 element-ui，表单验证相当不错，所以我希望它可以非常直接地“连接”一个表示表单是否对“提交”按钮有效的变量。

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

例如，每个规则已经有一个触发器，告诉它何时评估规则（例如模糊、更改）。如果我必须为每个 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"
            
        ]
    

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

【问题讨论】：

见github.com/vuejs/awesome-vue#validation

我希望能够利用 element-ui 表单组件中的内置验证，它基于“async-validator”。

【参考方案1】：

这是我最终做的：

我使用 vue.js 的“watch”工具来监控表单数据（关键是设置了“deep”，因此它可以监控字段值）并对其进行检查，更新一个禁用提交按钮的变量：

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

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

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