async-validator中对象的深度验证

 <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>

 

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'},
      },
}

 

posted @ 2022-04-21 14:06  南瓜壳  阅读(607)  评论(0编辑  收藏  举报