vue循环表单校验

前言

承接上回，循环表单实现了，那么怎么进行校验呢？

一、表单校验

demo都是以element组件为例的，主要是用到el-form的validate方法，如下图所示，其实该方法会返回一个promise，那么我们就可以将所有表单的validate方法的返回的promise全部执行就行了~

二、校验实现

主要的注意点就是每个表单上的ref引用唯一并且我们可获取就行了，那么就可以用for循环的表单数据的key作为ref，通过遍历原始数据，就可以拿到每一个表单的ref，最后用promise.all将每个获取所有promise的结果，决定是否进行后续逻辑就可以啦~，简要代码如下：

<el-form
    :ref="`ruleForm1-${form.key}`"
    class="form"
    :model="form.ruleForm1"
    label-width="100px"
></el-form>

<el-form 
    class="form" 
    :ref="`ruleForm2-${item.key}`" 
    :model="item" label-width="100px"
>
</el-form>

checkForm1() {
            const checkPromise = this.ruleForm.map(v => this.$refs?.[`ruleForm1-${v.key}`]?.[0]?.validate())
            return checkPromise
        },
        checkForm2() {
            const checkPromise = this.ruleForm?.reduce((p, c) => [...p, ...c.ruleForm2], [])?.map(v => this.$refs?.[`ruleForm2-${v.key}`]?.[0]?.validate())
            return checkPromise
        },
        confirm() {
            const checkPromise = [...this.checkForm1(), ...this.checkForm2()]
            Promise.all(checkPromise).then((resArr) => {
                if(resArr.every(v => v)) {
                    this.$confirm('确定提交?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '提交成功'
                        });
                    }).catch(() => {});
                }
            }).catch(() => {})
            
        }

如上代码就可以实现了，注意的是我们获取ref的时候，因为是for循环生成的，所以一定要this.$refs?.ruleForm1[0]这种后面取0索引的形式拿，不然用validate方法会报undefined的错误的。

效果

点击确定按钮的时候就会校验所有表单，校验通过的话就会有弹窗提醒是否确认提交~

三、总结

以上就是简单的循环表单校验的方法啦~ github链接：github.com/qiangguangl…