1. 程式人生 > 其它 >⑦ 元件 this$refs[formName]validate

⑦ 元件 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' },
      ]
    }
  }
}