element-ui 异步表单校验 All In One

element-ui 异步表单校验 All In One

async await / promise.all

情景1

Q: 如何在 element-ui 异步表单校验前手动触发一次 API 的请求, 并且确保在 API 返回前不会提交表单数据

// 手动触发批量校验

        submitAdData (formName = 'ksForm') {
            const tasks = [];
            this.ruleForm.creativeList.forEach((item, i) => {
                // 手动调用自定义子组件的方法 checkName
                tasks.push(this.$refs.normalCreativeTabs.$refs.custom_ref[i].autoCheckName(item.name));
            });
            // blur 先触发一次，手动调用后触发一次（重复 bug?）
            Promise.all(tasks).then(() => {
                this.$refs[formName].validate((valid, object) => {
                    if (!valid) {
                        const keys = Object.keys(object).filter(key => key.includes('creativeList.'));
                        for(const key of keys) {
                            if(!this.ruleForm[key]) {
                                const index = +key.split('.')[1];
                                this.ruleForm.creativeList[index].isError = true;
                            }
                        }
                        this.$emit('scroll');
                        return;
                    } else {
                        this.ruleForm.creativeList.forEach((item, i) => {
                            this.ruleForm.creativeList[i].isError = false;
                        });
                    }
                    this.ajaxToSubmit();
                });
            });
        },

A:

???

refs

https://element.eleme.io/#/zh-CN/component/form#zi-ding-yi-xiao-yan-gui-ze

https://github.com/yiminghe/async-validator

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---