iview表单验证多层对象嵌套的校验

<template>
  <div>
    <!-- 表单验证 -->
    <Button style="margin-bottom: 20px;" type="primary" size="large" @click="setScene">表单校验对象的嵌套</Button>
    <Modal v-model="isShowModal" width="600px" title="嵌套对象的校验">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="名字" prop="peopleInfo.name">
          <Input v-model="formValidate.peopleInfo.name" placeholder="请输入名字"></Input>
        </FormItem>
        <FormItem label="年龄" prop="peopleInfo.age">
          <Input v-model="formValidate.peopleInfo.age" placeholder="请输入年龄"></Input>
        </FormItem>
        <FormItem label="省份" prop="peopleInfo.province">
          <Input v-model="formValidate.peopleInfo.province" placeholder="请输入省份"></Input>
        </FormItem>
        <FormItem label="学历" prop="peopleInfo.degree">
          <Input v-model="formValidate.peopleInfo.degree" placeholder="请输入学历"></Input>
        </FormItem>
        <FormItem label="职业" prop="job">
          <Input v-model="formValidate.job" placeholder="请输入学历"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name:"formVaildate",
  data () {
    return {
      isShowModal:false,
      formValidate: {
        peopleInfo:{
          name: '',
          age: '',
          province: '',
          degree:"",
        },
        job:"",
      },
      ruleValidate: {
        'peopleInfo.name': [{ required: true, message: '请输入名字', trigger: 'blur' }],
        'peopleInfo.age': [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        'peopleInfo.province': [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
        'peopleInfo.degree': [{ required: true, message: '请输入学历', trigger: 'blur' }],
        job: [{ required: true, message: '请输入职业', trigger: 'blur' }],
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!');
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    },
    // 点击设置场景信息按钮
    setScene() {
      this.isShowModal = true;      // 开启对话框
      this.$refs.sceneConfiguration.resetFields();        // 重置表单，这是ui框架中现成的重置方法
    },
  }
}
</script>

<style scoped>

</style>

注意点就是：定义 ruleValidate 和 prop