element ui使用v-for循环form表单校验的实现

问题描述

在项目开发中，我们经常会遇到表单保存的功能，在表单保存前，常常需要做表单必填项的校验，校验通过以后才去发请求保存表单数据。

但是，这个表单如果是动态的，即：可以新增相同的表单。比如这个表单有输入框和下拉框需要校验，点击添加表格按钮，再新增一个相同的表单，同样新的这个表单对应的输入框和下拉框也需要校验。

代码思路

1、表单的主数据是要写成对象形式 :model="ruleForm" 不过既然是要动态的，肯定是要循环呢，所以，可以写成这样：

const ruleForm = reactive({
        ruleObj:[
            {
                name: '',
                region: '',
            },
            {
                name: '',
                region: '',
            }
        ]
    })

2、点击添加表格的时候，就可以直接push对应项就行啦
3、重点，因为是循环的，所以prop也要变成动态的了，要拼接上index，就变成根据索引去找对应的校验项了，即为：:prop="'ruleObj.' + index + '.name'" ，这样的话，就变成了：prop="ruleObj.0.name"、prop="ruleObj.1.name"、prop="ruleObj.2.name" ... 这样的话，就可以照顾到每一项中的每一个绑定的值了，校验就不会漏掉
4、校验规则写成内联就可以触发校验函数this.$refs["ruleForm"].validate((val) => {})了

下面附上vue2 及 vue3 示例

vue2.0

<template>
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
        <el-row v-for="(domain, index) in dynamicValidateForm.persons" :key="domain.key">
            <el-col :span="8">
                <el-form-item label="姓名" :prop="'persons.' + index + '.name'" :rules="rules.name">
                    <el-input v-model="domain.name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="手机号码" :prop="'persons.' + index + '.iphone'" :rules="rules.iphone">
                    <el-input v-model="domain.iphone"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="身份证号码" :prop="'persons.' + index + '.idCard'" :rules="rules.idCard">
                    <el-input v-model="domain.idCard"></el-input>
                </el-form-item>
            </el-col>
            <el-divider border-style="dashed" />
        </el-row>
        <el-form-item>
            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
            <el-button @click="addPerson">新增</el-button>
            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    export default {
        data() {
            return {
                dynamicValidateForm: {
                    persons: [{
                            name: '',
                            iphone: '',
                            idCard: ''
                        },
                        {
                            name: '',
                            iphone: '',
                            idCard: ''
                        },
                        {
                            name: '',
                            iphone: '',
                            idCard: ''
                        }
                    ],
                    email: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }],
                    iphone: [{
                            required: true,
                            message: '请输入手机号码',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                            message: '请输入正确格式的手机号码',
                            trigger: 'blur'
                        }
                    ],
                    idCard: [{
                            required: true,
                            message: '请输入身份证号码',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/,
                            message: '请输入正确格式的身份证号码',
                            trigger: 'blur'
                        }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            addPerson() {
                this.dynamicValidateForm.persons.push({
                    name: '',
                    iphone: '',
                    idCard: ''
                });
            }
        }
    }
</script>

image.png

vue3.0

<template>
    <div>
        <el-form  ref="ruleFormRef" :model="ruleForm" label-width="120px">
            <div v-for="(item, index) in ruleForm.ruleObj" :key="index">
                <el-form-item label="Activity name"  :prop="`ruleObj.${index}.name`" :rules="rules.name">
                    <el-input v-model="item.name" />
                </el-form-item>
                <el-form-item label="Activity zone" :prop="`ruleObj.${index}.region`" :rules="rules.region">
                    <el-select v-model="item.region" placeholder="Activity zone">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">Create</el-button>
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
    import {
        reactive,
        ref
    } from 'vue'
    import type {
        FormInstance,
        FormRules
    } from 'element-plus'

    const ruleFormRef = ref();
    const ruleForm = reactive({
        ruleObj:[
            {
                name: '',
                region: '',
            },
            {
                name: '',
                region: '',
            }
        ]
    })

    const rules = reactive < FormRules > ({
        name: [{
                required: true,
                message: 'Please input Activity name',
                trigger: 'blur'
            },
        ],
        region: [{
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        }],
    })

    const submitForm = async (formEl) => {
        console.log(formEl.validate)

        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                console.log('submit!')
            } else {
                console.log('error submit!', fields)
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }
</script>

image.png