elementUI动态嵌套el-form表单校验举例详解

 name: {
    type: 'string',
    required: true,
    pattern: /^[a-z]+$/,
    transform(value) {
      return value.trim();
    },
 }

<template>
    <div class="form-box">
        <el-form ref="formRef" :model="dynamicValidateForm" label-width="120px" :rules="rules">
            <div class="inner-form-box">
                <el-form-item prop="email" label="Email📮">
                    <el-input v-model="dynamicValidateForm.email" />
                </el-form-item>
            </div>
            <div v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key" class="inner-form-box">
                <span>{{ `网站${index + 1}💌:` }}</span>
                <el-form-item label="网站域名：" :prop="'domains.' + index + '.value'" :rules="rules.domains.value">
                    <el-input v-model="domain.value" />
                </el-form-item>
                <div>
                    <span>{{ `网站${index + 1}详情📃:` }}</span>
                    <el-form-item label="网站名称：" :prop="'domains.' + index + '.info.name'" :rules="rules.domains.info.name">
                        <el-input v-model="domain.info.name" />
                    </el-form-item>
                    <el-form-item label="网站简介：" :prop="'domains.' + index + '.info.intro'"
                        :rules="rules.domains.info.intro">
                        <el-input v-model="domain.info.intro" />
                    </el-form-item>
                </div>
                <div class="del-btn-box">
                    <el-button type="danger" link @click="removeDomain(domain)">删除</el-button>
                </div>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
                <el-button @click="addDomain">New domain</el-button>
                <el-button @click="resetForm(formRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
    domains: DomainItem[]
    email: string
}>({
    domains: [
        {
            key: 1,
            value: '',
            info: {
                name: '',
                intro: ''
            }
        },
    ],
    email: '',
})
const rules = {
    email: [
        {required: true,message: '邮箱地址不能为空哦',trigger: 'blur',},
        {type: 'email',message: '请输入正确的邮箱格式',trigger: ['blur', 'change'],},
    ],
    domains: {
        value: {required: true,message: '网站域名不能为空哦',trigger: 'blur',},
        info: {
            name: {required: true,message: '网站名称不能为空哦',trigger: 'blur',},
            intro: {required: true,message: '网站简介不能为空哦',trigger: 'blur',}
        }
    }
}
interface DomainItem {
    key: number
    value: string
    info: {
        name: string
        intro: string
    }
}
const removeDomain = (item: DomainItem) => {
    const index = dynamicValidateForm.domains.indexOf(item)
    if (index !== -1) {
        dynamicValidateForm.domains.splice(index, 1)
    }
}
const addDomain = () => {
    dynamicValidateForm.domains.push({
        key: Date.now(),
        value: '',
        info: {
            name: '',
            intro: ''
        }
    })
}
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log(dynamicValidateForm)
        } else {
            console.log('error submit!')
            return false
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style scoped>
.form-box {
    padding: 50px;
}
.inner-form-box {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 5px 0px #f2f2f2;
}
.del-btn-box {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(120%);
}
</style>