当前位置：首页 > news >正文

vue+Element项目中v-for循环+表单验证

news 2025/8/18 4:21:06

如果在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 }],
});

表单验证的时候：