如果在Form 表單里有通過v-for動態(tài)生成，如何設置驗證呢？

<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="請輸入獎品數(shù)量">
                                </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: '', //數(shù)量
            image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //圖片
        }, {
            prize_id: '',
            prizename: '', //名稱
            ptock: '', //庫存
            odds: '', //概率
            prizelog: '', //數(shù)量
            image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //圖片
        }, {
            prize_id: '',
            prizename: '', //名稱
            ptock: '', //庫存
            odds: '', //概率
            prizelog: '', //數(shù)量
            image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //圖片
        }, {
            prize_id: '',
            prizename: '', //名稱
            ptock: '', //庫存
            odds: '', //概率
            prizelog: '', //數(shù)量
            image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //圖片
        }, {
            prize_id: '',
            prizename: '', //名稱
            ptock: '', //庫存
            odds: '', //概率
            prizelog: '', //數(shù)量
            image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //圖片
        }, {
            prize_id: '',
            prizename: '', //名稱
            ptock: '', //庫存
            odds: '', //概率
            prizelog: '', //數(shù)量
            image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //圖片
        }, {
            prize_id: '',
            prizename: '', //名稱
            ptock: '', //庫存
            odds: '', //概率
            prizelog: '', //數(shù)量
            image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //圖片
        }, {
            prize_id: '',
            prizename: '', //名稱
            ptock: '', //庫存
            odds: '', //概率
            prizelog: '', //數(shù)量
            image: 'https://s1.ax1x.com/2023/04/20/p9ksgmt.png', //圖片
        }],
});

// 獎品名稱校驗
const prizenamecheck = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('請?zhí)顚應勂访Q'));
    }
    callback();
}

// 獎品庫存校驗
const ptockcheck = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('請?zhí)顚應勂穾齑?));
    }
    callback();
}

// 獎品概率校驗
const oddscheck = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('請?zhí)顚應勂犯怕?));
    }
    callback();
}

// 獎品數(shù)量校驗
const prizelogcheck = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('請?zhí)顚應勂窋?shù)量'));
    }
    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’就是數(shù)據(jù)結構與數(shù)據(jù)
3. 每一個循環(huán)中的都需要加：rules

注意點：

:prop="'input.' + index + '.ptock'"的寫法也可以是模板字符串

?文章來源地址http://www.zghlxwxcb.cn/news/detail-615227.html

到了這里，關于vue+Element項目中v-for循環(huán)+表單驗證的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！