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

最新推荐文章于 2024-06-20 20:43:52 发布

天玄TX

最新推荐文章于 2024-06-20 20:43:52 发布

阅读量2.1k

点赞数 5

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/TianXuab/article/details/131923785

版权

Vue 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

文章介绍了如何在Vue.js中使用v-for动态生成Form表单，并设置对应的验证规则。通过绑定`:prop`属性，结合动态数据结构，如`input.+index+.prizename`，实现了每个循环内输入项的校验功能，包括奖品名称、库存、概率和数量等字段的必填验证。

摘要由CSDN通过智能技术生成

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

表单验证的时候：