el-form 嵌套验证

表单中如果增加列表子项集合,例如下图的数据结构,需要对子项的字段进行验证的时候。

formData:{
        name:'',
        list:[ // 集合子项
          { name:'',id:''} // 需要验证里面的字段
        ]
      },

使用 :prop=”`domains.${index}.value`”

方法1:行内写规则

<template>
    <el-form ref="form" :model="formData" label-width="100px">
        <el-form-item
            v-for="(domain, index) in form.list"
            :key="index"
            label="姓名"
            :prop="`domains.${index}.value`"
            :rules="[
                { required: true, message: 'name is required' },
                { type: 'string', message: 'name must be a string' },
                { validator: checkName, trigger: ['blur'] }
            ]"
        >
            <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
</template>

方法2:引用方式

<template>
    <el-form ref="form" :model="formData" :rules="rule" label-width="100px">
        <el-form-item
            v-for="(domain, index) in form.list"
            :key="index"
            label="姓名"
            :prop="`list.${index}.value`"
            :rules="rule.list.name"
        >
            <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
</template>
// 验证规则写法
rules: {
    name: [{ required: true, message: '协议必填', trigger: 'blur' }],
    // 子项验证规则
    list: {
       name: [{ required: true, message: '协议必填', trigger: 'blur' }]
    }
}
上一篇
下一篇