Element UI 表单嵌套对象 规则验证

在绑定prop的时候以xxx.xx的形式绑定，写rules的时候也以xxx.xx的形式定义健

data(){
 return{
      ruleForm:{
        human:{
            name:'',
            sex:0,
        },
        dog:'',
       }
    }
    rules:{
        dog: { required: true, message: '请填写dog', trigger: 'blur' },  //type默认是string
        'human.name':[{type: "string", required: true, message: '请填写名字', trigger: 'blur'}],  //有多条校验条件的时候可以放个object数组
        'human.sex':{ type: "string",required: true, message: '请填写性别', trigger: 'blur'},
      },
}

 methods:{
    submitForm(formName) {
      var self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {  
         //提交前校验以下是否通过  
          self.$http.post(this.HOST+"/xxx",JSON.stringify(self.ruleForm.human), {headers: {"Content-Type": "application/json"}})  //我这里只提交human部分
          .then(res=>{
 
          }).catch(err => {
          });
        } else { //这一段是为了找到第一个校验不通过的地方, 然后focus过去
          var isError=document.getElementsByClassName("is-error");
          isError[0].querySelector('input').focus();
          return false;  
        }
      });
    },
}

 <el-form
        :inline="true"
        :model="ruleForm"
        label-width="110px"
        ref="ruleForm"
        :rules="rules"
        style="width:90%;margin:0 auto">
      <el-card>
            <div slot="header">
              <span>基本信息</span>
            </div>
            <div>
              <div>
                <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.sex">
                    <el-input v-model="ruleForm.human.sex"></el-input>
                </el-form-item>
               </div>
               <div>
                 <el-form-item label="dog:"  prop="dog">
                    <el-input v-model="ruleForm.dog"></el-input>
                </el-form-item>
               </div>
            </div>
       </el-card>
       <el-form-item style="margin-top:20px;float:right">
            <el-button type="primary" @click="submitForm('ruleForm')" >确定</el-button>
            <el-button >取消</el-button>
       </el-form-item>
       <div class="clear"></div>
</el-form>