vue表单多层验证

//数据格式
policyDialogData: {
        formData: {
          strategy: [
            {
              type: '',
              number: '',
              opCode: '',
              level: "",
              kind: "",
              startTime: "",
              endTime: "",
            },
            {
              type: '',
              number: '',
              opCode: '',
              level: "",
              kind: "",
              startTime: "",
              endTime: "",
            },
          ],
          kafka: {
            ip: "",
            port: "",
            key: "",
            username: "",
            password: "",
          },
        },   
      },

//rule验证
data(){
 var ipValid = (rule, value, callback) => {
      var reg = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
      if (!value) {
        return callback(new Error("请输入地址!"));
      }
      if (reg.test(value)) {
        return callback();
      } else {
        return callback(new Error("地址格式不正确，默认地址格式为IP格式"));
      }
    };
    var portValid = (rule, value, callback) => {
      var reg = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
      if (!value) {
        return callback(new Error("请输入端口"));
      }
      if (reg.test(value)) {
        return callback();
      } else {
        return callback(new Error("端口格式不正确！"));
      }
    };
    return {
      formRules: {
		"kafka.ip": [
          {
            validator: ipValid,
            trigger: "blur",
          },
        ],
        "kafka.port": [
          {
            validator: portValid,
            trigger: "blur",
          },
        ],
        "kafka.key": [
          {
            required: true,
            message: "请输入密钥",
            trigger: "blur",
          },
        ],
        "kafka.username": [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        "kafka.password": [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请选择日志类型", trigger: "change" },
        ],
        number: [
          {
            required: true,
            message: "请输入产品编号",
            trigger: "blur",
          },
        ],
        opCode: [
          {
            required: true,
            message: "请输入日志类型",
            trigger: "blur",
          },
        ],
        startTime: [
          {
            type: "date",
            required: true,
            message: "请选择开始时间",
            trigger: "change",
          },
        ],
        endTime: [
          {
            type: "date",
            required: true,
            message: "请选择结束时间",
            trigger: "change",
          },
        ],
      },
    }
}

     <el-form
        ref="policyDialogData"
        :model="policyDialogData.formData"
        :rules="formRules"
      >
            <el-form-item label="" prop="kafka.ip">
              <el-input
                v-model="policyDialogData.formData.kafka.ip"
                placeholder="请输入IP"
              />
            </el-form-item>
            <el-form-item label="" prop="kafka.port">
              <el-input
                v-model="policyDialogData.formData.kafka.port"
                placeholder="请输入端口"
              />
            </el-form-item>
            <el-form-item label="" prop="kafka.key">
              <el-input
                v-model="policyDialogData.formData.kafka.key"
                placeholder="请输入密钥"
              />
            </el-form-item>
            <el-form-item label="" prop="kafka.username">
              <el-input
                v-model="policyDialogData.formData.kafka.username"
                placeholder="请输入用户名"
              />
            </el-form-item>
            <el-form-item label="" prop="kafka.password">
              <el-input
                type="password"
                v-model="policyDialogData.formData.kafka.password"
                placeholder="请输入密码"
              />
            </el-form-item>
            <div>
              <el-button @click="addTab()" type="primary" plain>添加</el-button>
            </div>
            <el-card
              v-for="(item, index) in policyDialogData.formData.strategy"
              :key="index"
              style="width: 300px; display: inline-block; margin: 10px"
            >
              <div slot="header" class="clearfix">
                <el-button
                  style="float: right"
                  v-show="policyDialogData.formData.strategy.length > 1"
                  @click="reduceTab(index)"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                ></el-button>
              </div>
              <el-form-item
                label=""
                :prop="'strategy.'+index+'.type'"
                :rules="formRules.type"
              >
                <el-select v-model="item.type" placeholder="请选择日志类型">
                  <el-option
                    v-for="item in policyDialogData.list.typeList"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label=""
                :prop="`strategy[${index}].number`"
                :rules="formRules.number"
              >
                <el-input
                  v-model="item.number"
                  placeholder="请输入产品编号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                :prop="`strategy[${index}].opCode`"
                :rules="formRules.opCode"
              >
                <el-input
                  v-model="item.opCode"
                  placeholder="请输入日志类型"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="item.kind"
                  placeholder="请输入行为类别"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="item.level"
                  placeholder="请输入风险级别"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                :prop="`strategy[${index}].startTime`"
                :rules="formRules.startTime"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="item.startTime"
                  type="datetime"
                  placeholder="请输入开始时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label=""
                :prop="`strategy[${index}].endTime`"
                :rules="formRules.endTime"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="item.endTime"
                  type="datetime"
                  placeholder="请输入结束时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-card>
      </el-form>

• 当对象中嵌套对象的数据

<el-form-item  prop="kafka.ip">
    <el-input v-model="policyDialogData.formData.kafka.ip" />
</el-form-item>
保证el-form的model和el-form-item的prop拼在一起最终能取到要验证的数值

• 当数据为对象数组时

<el-card v-for="(item, index) in policyDialogData.formData.strategy" :key="index" >
	<el-form-item :prop="`strategy[${index}].number`" :rules="formRules.number">
     	<el-input v-model="item.number"></el-input>
	</el-form-item>
</el-card>
//设置prop和rules属性
//保证el-form的model和el-form-item的prop拼在一起最终能取到要验证的数值
//注意prop、rules是动态的

• 保证el-form的model和el-form-item的prop拼在一起最终能取到要验证的数值

参考博客：对象嵌套对象的情况
对象数组的情况