Form 组件提供了表单验证的功能,只需要通过 rules
属性传入约定的验证规则,并将 Form-Item 的 prop
属性设置为需校验的字段名即可。
效果:当不选择非长期营业期限时,不需要校验营业期限字段;当选择非长期营业期限时,需要校验营业期限
代码:
<el-row type="flex" class="row-bg"> <el-col :span="12"> <el-form-item label="非长期营业期限"> <el-switch v-model="businessTermAdmin"/> </el-form-item> </el-col> <el-col v-show="businessTermAdmin" :span="12"> <el-form-item :rules="businessTermAdmin ? rules.businessTerm : []" label="营业期限:" prop="businessTerm"> <el-date-picker v-model="ent.businessTerm" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" /> </el-form-item> </el-col> </el-row>
script
rules: { businessTerm: [{required: true, message: '请填写营业期限', trigger: 'blur'}] }