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

如果在Form 表单里有通过v-for动态生成，如何设置验证呢？

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'"的写法也可以是模板字符串