Element-ui 表单嵌套验证

1.当表单的字段值是数组或者对象时的rules配置

• 对象：直接用obj.xx配置rules和prop
• 数组：用list.index.xx配置rules和prop

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="人名" prop="human.name">
                <el-input v-model="ruleForm.human.name"></el-input>
            </el-form-item>
            <el-form-item label="年纪" prop="human.age">
                <el-input v-model="ruleForm.human.age"></el-input>
            </el-form-item>
            <el-form-item label="狗狗" prop="dog">
                <el-input v-model="ruleForm.dog"></el-input>
            </el-form-item>
            <el-form-item label="朋友1" prop="friend.0.value">
                <el-input v-model="ruleForm.friend[0].value"></el-input>
            </el-form-item>
            <el-form-item label="朋友2" prop="friend.1.value">
                <el-input v-model="ruleForm.friend[0].value"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">立即创建</el-button>
            </el-form-item>
        </el-form>

<script>
    new Vue({
        el: "#app",
        data: {
            ruleForm: {
                human: {
                    name: "",
                    age: ""
                },
                dog: "",
                friend: [
                    {
                        name: "朋友1",
                        value: ""
                    },
                    {
                        name: "朋友2",
                        value: ""
                    }
                ]
            },
            rules: {
                dog: [
                    { required: true, message: '请输入狗狗名称222', trigger: 'blur' }
                ],
                'human.name':[
                { required: true, message: '请输入人名称222', trigger: 'blur' }
                ],
                'human.age':[
                { required: true, message: '请输入人年纪22', trigger: 'blur' }
                ],
                'friend.0.value': [
                    { required: true, message: '请输入朋友1名称', trigger: 'blur' }
                ],
                'friend.1.value': [
                    { required: true, message: '请输入朋友2名称', trigger: 'blur' }
                ],
            }
        },
        created() { },
        mounted() { },
        methods: {
            submitForm(formName) {
                this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm)
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
        }
    })
</script>