⑦ 组件 this$refs[formName]validate

1. 打印一下 this.$refs[formName]，检查是否拿到了正确的需要验证的 form

2. 在拿到了正确的 form 后，检查该 form 上添加的表单验证是否正确，需要注意的点有：

• el-form rules，model 属性绑定，ref 标识

• el-form-item prop 属性绑定

<Form ref="listPopForm" :model="listpop" label-position="right" :label-width="120" :rules="validateRules">
  <FormItem label="公司名称：" prop="listpopdata.company">
    <Input placeholder="请输入公司名称" v-model="listpop.listpopdata.company"></Input>
  </FormItem>
  <FormItem label="渠道包分组名称：" prop="listpopdata.name">
    <Input placeholder="请输入渠道包分组名称" v-model="listpop.listpopdata.name"></Input>
  </FormItem>
  <FormItem label="全服审批：" style="display: inline-block;">
    <i-switch size="large" v-model="listpop.auto_check_config.check_all_status" :true-value="listpop.switchToolValueMap[0].trueValue" :false-value="listpop.switchToolValueMap[0].falseValue">
      <span v-for="(item, index) in listpop.check_status_map" :slot="item.slotName" :key="index">{{ item.label }}</span>
    </i-switch>
  </FormItem>
  <div v-show="listpop.auto_check_config.check_all_status" class="check-status" style="margin-left:10px;">
    <span> 一个区服最多</span>
    <FormItem label="" :label-width="0" style="display: inline-block;" prop="auto_check_config.group_config.check_player_num" :rules="{ required: true, message: '请输入自动审批数量', trigger: 'blur' }">
      <Input v-model="listpop.auto_check_config.group_config.check_player_num" style="width:120px;"></Input>
    </FormItem>
    <span>个自动审批</span>
    <span style="color: red">（自动审批个数填写为0时不限制数量）</span>
  </div>
</Form>

data() {
  return {
    validateRules:{
      'listpopdata.company': [
        { required: true, message: '请输入公司名称', trigger: 'blur', type: 'string' },
      ],
      'listpopdata.name': [
        { required: true, message: '请输入渠道包分组名称', trigger: 'blur', type: 'string' },
      ]
    }
  }
}