如果在Form 表单里有通过v-for动态生成，如何设置验证呢？
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm" hide-required-asterisk> <div v-for="(item, index) in ruleForm.input" :key="index"> <el-form-item label="活动奖品"> <el-form-item :prop="'input.' + index + '.prizename'" :rules="rules.prizename"> <el-input v-model="item.prizename" style="width: 165px; margin-right: 10px;" autocomplete="off" placeholder="请输入奖品名称" clearable> </el-input> </el-form-item> <el-form-item :prop="'input.' + index + '.ptock'" :rules="rules.ptock"> <el-input v-model="item.ptock" style="width: 165px; margin-right: 10px;" autocomplete="off" placeholder="请输入奖品库存" clearable> </el-input> </el-form-item> <el-form-item :prop="'input.' + index + '.odds'" :rules="rules.odds"> <el-input-number v-model="item.odds" class="mx-4" :min="1" :max="100" style="width: 165px; margin-right: 10px;" controls-position="right" placeholder="请输入中奖几率" @change="handleChange" /> </el-form-item> <el-form-item :prop="'input.' + index + '.prizelog'" :rules="rules.prizelog"> <el-input v-model="item.prizelog" style="width: 165px;" autocomplete="off" placeholder="请输入奖品数量"> </el-input> </el-form-item> </el-form-item> </div> </el-form>
const ruleForm = reactive({ scienceid: "", name: "", sort: 0, begin: "", end: "", lat: "", img: '', input: [ { prize_id: '', prizename: '', //名称 ptock: '', //库存 odds: '', //概率 prizelog: '', //数量 image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //图片 }, { prize_id: '', prizename: '', //名称 ptock: '', //库存 odds: '', //概率 prizelog: '', //数量 image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //图片 }, { prize_id: '', prizename: '', //名称 ptock: '', //库存 odds: '', //概率 prizelog: '', //数量 image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //图片 }, { prize_id: '', prizename: '', //名称 ptock: '', //库存 odds: '', //概率 prizelog: '', //数量 image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //图片 }, { prize_id: '', prizename: '', //名称 ptock: '', //库存 odds: '', //概率 prizelog: '', //数量 image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //图片 }, { prize_id: '', prizename: '', //名称 ptock: '', //库存 odds: '', //概率 prizelog: '', //数量 image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //图片 }, { prize_id: '', prizename: '', //名称 ptock: '', //库存 odds: '', //概率 prizelog: '', //数量 image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //图片 }, { prize_id: '', prizename: '', //名称 ptock: '', //库存 odds: '', //概率 prizelog: '', //数量 image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //图片 }], });
// 奖品名称校验 const prizenamecheck = (rule, value, callback) => { if (!value) { return callback(new Error('请填写奖品名称')); } callback(); } // 奖品库存校验 const ptockcheck = (rule, value, callback) => { if (!value) { return callback(new Error('请填写奖品库存')); } callback(); } // 奖品概率校验 const oddscheck = (rule, value, callback) => { if (!value) { return callback(new Error('请填写奖品概率')); } callback(); } // 奖品数量校验 const prizelogcheck = (rule, value, callback) => { if (!value) { return callback(new Error('请填写奖品数量')); } callback(); } // 表单检验 const rules = reactive({ prizename: [{ required: true, trigger: 'blur', validator: prizenamecheck }], ptock: [{ required: true, trigger: 'blur', validator: ptockcheck }], odds: [{ required: true, trigger: 'blur', validator: oddscheck }], prizelog: [{ required: true, trigger: 'blur', validator: prizelogcheck }], });
表单验证的时候：
1. prop改为 “:prop”，形式为'input.' + index + '.ptock'
2. 'input.' + index + '.ptock’就是数据结构与数据
3. 每一个循环中的都需要加：rules
注意点：
:prop="'input.' + index + '.ptock'"的写法也可以是模板字符串
