⑦ 元件 this$refs[formName]validate
阿新 • • 發佈:2022-05-18
-
列印一下
this.$refs[formName]
,檢查是否拿到了正確的需要驗證的form
-
在拿到了正確的
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' }, ] } } }