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

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

表单验证的时候:

  1. prop改为 “:prop”,形式为'input.' + index + '.ptock'
  2. 'input.' + index + '.ptock’就是数据结构与数据
  3. 每一个循环中的都需要加:rules

注意点:

:prop="'input.' + index + '.ptock'"的写法也可以是模板字符串
在这里插入图片描述

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/45181.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Zabbix-server监控mysql及httpd服务

目录 一、Zabbix监控mysql数据库 1、为server.Zabbix.com添加服务模板 2、创建mysql服务图形 二、server.zabbix.com服务器操作 编辑chk_mysql.sh脚本 三、server.Zabbix.com测试 四、查看web效果 五、Zabbix监控apache&#xff08;httpd服务&#xff09; 安装master 六、…

改进的北方苍鹰算法优化BP神经网络---回归+分类两种案例

今天采用前作者自行改进的一个算法---融合正余弦和折射反向学习的北方苍鹰(SCNGO)优化算法优化BP神经网络。 文章一次性讲解两种案例&#xff0c;回归与分类。回归案例中&#xff0c;作者选用了一个经典的股票数据。分类案例中&#xff0c;选用的是公用的UCI数据集。 BP神经网络…

Cesium态势标绘专题-多边形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

Redis追本溯源(三)内核:线程模型、网络IO模型、过期策略与淘汰机制、持久化

文章目录 一、Redis线程模型演化1.Redis4.0之前2.Redis4.0之后单线程、多线程对比3.redis 6.0之后 二、Redis的网络IO模型1.基于事件驱动的Reactor模型2.什么是事件驱动&#xff0c;事件驱动的Reactor模型和Java中的AIO有什么区别3.异步非阻塞底层实现原理 三、Redis过期策略1.…

【数字信号处理】带通采样定理及其MATLAB仿真

目录 一、带通采样定理1.1 内容1.2 公式推导 二、MATLAB信号仿真2.1 信号仿真实验2.2 MATLAB代码 三、总结参考 一、带通采样定理 按照奈奎斯特采样定理(低通采样)&#xff0c;采样频率 f s f_{s} fs​ 要大于等于信号中最高频率 f m a x f_{max} fmax​ 的2倍&#xff0c;才…

28.1 kibana

Kibana 是一个免费且开放的用户界面&#xff0c;能够对 Elasticsearch 数据进行可视化操作&#xff0c;从跟踪查询负载&#xff0c;到理解请求如何流经整个应用&#xff0c;都能轻松完成。 1.Kibana安装 注意要与ES版本保持一致 https://www.elastic.co/downloads/past-relea…

C# 目标平台为x64,自定义控件不可用,显示控件未能加载,错误解决方法

由于项目加载第三方的dll需要编译成x64&#xff0c;设置编译目标为x64 结果打开窗口设计器时&#xff0c;自定义的控件不能显示及加载 错误消息&#xff1a;未能找到类型“XXX”。请确保已引用包含此类型的程序集。如果此类型为开发项目的一部分&#xff0c;请确保已使用针对当…

Android 在程序运行时申请权限——以自动拨打电话为例

Android 6.0及以上系统在使用危险权限时必须进行运行时权限处理。 main_activity.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://sche…

HDFS的文件块大小(重点)

HDFS 中的文件在物理上是分块存储 &#xff08;Block &#xff09; &#xff0c; 块的大小可以通过配置参数( dfs.blocksize&#xff09;来规定&#xff0c;默认大小在Hadoop2.x/3.x版本中是128M&#xff0c;1.x版本中是64M。 如果一个文件文件小于128M&#xff0c;该文件会占…

【C#】并行编程实战:使用 Visual Studio 调试任务

并行编程可以提高应用程序的性能&#xff0c;但是调试起来会更困难&#xff0c;这一点在之前的章节中我们已经有了很直观的感受。对于程序而言&#xff0c;保证程序的正确性和保证性能同样重要。 本章将介绍可以在 Visual Studio 中的调试工具&#xff08;包括 Thread 窗口、Ta…

Qt Core学习日记——第三天QMetaEnum(上)

QMetaEnum用来代表枚举信息,内部也是访问moc文件。从moc文件中得到对应值 需要在头文件中声明 Q_ENUM,如下红框部分 moc中qt_meta_stringdata_XTest变为&#xff1a; qt_meta_data_XTest变为 static const uint qt_meta_data_XTest[] { // content: 8, // revision 0, // …

(二)RabbitMQ【安装Erlang、安装RabbitMQ 、账户管理、管控台、Docker安装 】

Lison <dreamlison163.com>, v1.0.0, 2023.06.22 RabbitMQ【安装Erlang、安装RabbitMQ 、账户管理、管控台、Docker安装 】 文章目录 RabbitMQ【安装Erlang、安装RabbitMQ 、账户管理、管控台、Docker安装 】**安装Erlang**安装RabbitMQ账户管理管控台Docker安装RabbitM…

打家劫舍系列

class Solution { public:int dp[105];//dp[i]表示偷取前i个房间获取的最大值int rob(vector<int>& nums) {// // dp[i][0];不偷取第i间房&#xff0c;偷取前i-1间房的最大值// //dp[i][1];偷取第i间房&#xff0c;偷取前i间房的最大值// memset(dp,0,siz…

案例研究|DataEase助力亚加达智能医学实验室场景BI展示

深圳市亚加达信息技术有限公司&#xff08;以下简称为亚加达&#xff09;成立于2018年&#xff0c;是一家专注于医疗信息系统研发的高科技公司&#xff0c;隶属于亚辉龙集团。 亚加达深入理解医疗实验室业务和日常工作流程&#xff0c;通过物联网和大数据技术&#xff0c;基于…

ubuntu环境安装centos7虚拟机网络主机不可达,ping不通

【NAT模式下解决】1.首先vi /etc/sysconfig/network-scripts/ifcfg-ens33检查ONBOOTyes&#xff0c;保存 2.输入systemctl restart network命令重启网关

GBASE南大通用出席CCF第38届中国计算机应用大会

在数据要素市场化分论坛上&#xff0c;GBASE南大通用高级副总裁赵伟发表“以自主可控的国产基础软件新兴技术保障数据要素安全高效流通”的主题演讲&#xff0c;向参会嘉宾分享基于GBASE数据库的自主可控国产软件&#xff0c;保障数据要素安全流通、高效流转的创新实践。 赵伟讲…

Maven学习笔记

Maven学习笔记 一、MAVEN基础1.1、Maven作用1.2、Maven基础概念1.2.1、仓库1.2.2、坐标1.2.2、仓库配置 1.3、 手动写一个maven程序1.4、依赖管理1.5、生命周期与插件1.5.1、构建生命周期1.5.2、插件 一、MAVEN基础 1.1、Maven作用 Maven的本质是一个项目管理工具&#xff0c…

王道考研数据结构--4.3链队列

目录 前言 1.链队列的定义 2.链队列的结构 3.链队列的操作 3.1定义链队列 3.2初始化 3.3入队 3.4出队 3.5遍历求表长 3.6清空&#xff0c;销毁 4.完整代码 前言 日期&#xff1a;2023.7.25 书籍&#xff1a;2024年数据结构考研复习指导&#xff08;王道考研系列&…

Cesium态势标绘专题-自由多边形(标绘)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

蓝桥杯专题-真题版含答案-【加法变乘法】【三羊献瑞】【交换瓶子】【卡片换位】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…