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 }],
});
表单验证的时候:
- prop改为 “:prop”,形式为'input.' + index + '.ptock'
- 'input.' + index + '.ptock’就是数据结构与数据
- 每一个循环中的都需要加:rules
注意点:
:prop="'input.' + index + '.ptock'"的写法也可以是模板字符串
相关文章:
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-aster…...
Day 66-68 主动学习之ALEC
代码: package dl;import java.io.FileReader; import java.util.*; import weka.core.Instances;/*** Active learning through density clustering.*/ public class Alec {/*** The whole dataset.*/Instances dataset;/*** The maximal number of queries that …...
local-path-provisioner与pvc本地磁盘挂载helm部署
1.helm拉取安装包 helm repo add containeroo https://charts.containeroo.ch helm pull containeroo/local-path-provisioner --version 0.0.19 tar -zxvf local-path-provisioner-0.0.19.tgz cd local-path-provisioner mv values.yaml values.yaml.back grep -v "#&qu…...
Visio/PPT/Matlab输出300dpi以上图片【满足标准投稿要求】
1. visio 遵照如下输出选项,另存为tif格式文件时,选择正确输出便是300dpi以上 2. matlab 文件选项选中导出设置,在渲染中选择dpi为600,导出图片即可,科研建议选择tif格式文件 3.ppt 打开注册表,winr键…...
科技UI图标的制作
科技UI图标的制作,效果图如下: 一、新建合成 1、新建合成,命名为合成1,参数设置如下: 2、新建纯色,命名为分形 二、添加分形杂色 1、添加分形杂色 为纯色层“分形”,添加分形杂色,…...
微信小程序将接口返回的文件流预览导出Excel文件并转发
把接口url替换就可以用了 exportExcel () {wx.request({url: importMyApply, //这个地方是你获取二进制流的接口地址method: POST,responseType: "arraybuffer", //特别注意的是此处是请求文件流必须加上的属性,不然你导出到手机上的时候打不开ÿ…...
windows 安装 mongodb 数据库
软件下载 访问官方的下载地址: https://www.mongodb.com/try/download/community ,然后选择对应的版本进行下载 下载好了之后双击进行安装 软件安装 1、点击 next 点击下一步 2、勾选接受协议,点击 next 3、第三页有两个选项&#x…...
业务不打烊:解决软件系统升级痛点的新方法
数字化时代,随着用户对产品性能和功能要求的不断提升,应用服务升级成了企业保持竞争力的关键之一。然而,传统的应用服务升级往往会给用户带来不必要的中断和不便,这种“伤筋动骨”的升级方式已经无法满足日益增长的用户需求&#…...
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
文章目录 ⭐前言⭐利用inscode免费开放资源💖 在inscode搭建vue3tsant项目💖 调整配置💖 antd 国际化配置💖 用户store💖 路由权限💖 预览 ⭐结束 ⭐前言 大家好,我是yma16,本文分享…...
通过 CSS 的样式实现语音发送动效类似声音震动的效果
实现效果:一般用于发送语音的时候,出现动画效果 //模版部分 <view class"musical-scale"><view class"scale"><view class"em" v-for"(item,index) in 15" :key"index"></view…...
【C#】.Net Framework框架使用JWT
2023年,第31周,第2篇文章。给自己一个目标,然后坚持总会有收货,不信你试试! 本篇文章主要简单讲讲,.Net Framework框架下使用JWT的代码例子,以及他们的基本概念。 2002年微软发布了.net framewo…...
SQL高级教程第三章
SQL CREATE DATABASE 语句 CREATE DATABASE 语句 CREATE DATABASE 用于创建数据库。 SQL CREATE DATABASE 语法 CREATE DATABASE database_name SQL CREATE DATABASE 实例 现在我们希望创建一个名为 "my_db" 的数据库。 我们使用下面的 CREATE DATABASE 语句&…...
vue 3.0 下载本地pdf文件
使用a标签,把pdf文件放到public文件夹下面 <el-form label-width"160px"> <el-form-item label"使用手册"> <div class"form-item-static"> <a href"/使用手册.pdf" target"_blank" class"link&q…...
平板用的触控笔什么牌子好?ipad第三方电容笔推荐
随着技术的发展,出现了各种各样的平板电容笔。一支好的电容笔,不但可以极大地提升我们的工作效率,还可以极大地提升我们的学习效果。平替的电容笔,无论是在技术方面,还是在质量方面,都还有很大的提升空间&a…...
【Unity2D】相机移动以及设置相机边界
添加相机 添加相机时,首先需要在unity中添加 Cinemachine 包 第一次使用这个包时,需要在Package Manager中搜索并安装 安装Camera Mechine包后,添加2D Camera 设置跟随对象为Ruby (从Hierarchy中将Ruby拖动到Follow中࿰…...
和chatgpt学架构04-路由开发
目录 1 什么是路由2 如何设置路由2.1 安装依赖2.2 创建路由文件2.3 创建首页2.4 编写HomePage2.5 更新路由配置2.6 让路由生效 3 测试总结 要想使用vue实现页面的灵活跳转,其中路由配置是必不可少的,我们在做开发的时候,先需要了解知识点&…...
Spring MVC异常处理【单个控制异常处理器、全局异常处理器、自定义异常处理器】
目录 一、单个控制器异常处理 1.1 控制器方法 1.2 编写出错页面 1.3 测试结果 二、全局异常处理 2.1 一个有异常的控制器类 2.2 全局异常处理器类 2.3 测试结果 三、自定义异常处理器 3.1 自定义异常处理器 3.2 测试结果 往期专栏&文章相关导读 1. Maven系列…...
使用3ds Max粒子系统创建飞天箭雨特效场景
推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 设置箭头 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 我使用多边形建模技术制作了一个简单的箭头,我将 在教程中使用。.max您可以从 下载部分。 箭头.max 步骤 3 将此箭头重命名为静态…...
【朴素贝叶斯实例】
朴素贝叶斯对新闻进行分类 朴素贝叶斯算法是一种常用的文本分类方法,特别适用于自然语言处理任务,如新闻分类。在这篇博客中,我们将使用Python的scikit-learn库来实现朴素贝叶斯算法,并将其应用于新闻分类任务。 数据准备 首先…...
MPAS跨尺度、可变分辨率模式
跨尺度预测模式(The Model for Prediction Across Scales - MPAS)是由洛斯阿拉莫斯实验室和美国国家大气研究中心(NCAR)共同开发,其由3个部分组成,分别称为 MPAS-A(大气模型)、MPAS-O(海洋模型&…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
