如果在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 }],
});
表单验证的时候:
- prop改为 “:prop”,形式为'input.' + index + '.ptock'
- 'input.' + index + '.ptock’就是数据结构与数据
- 每一个循环中的都需要加:rules
注意点:
:prop="'input.' + index + '.ptock'"的写法也可以是模板字符串