当前位置: 首页 > news >正文

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'"的写法也可以是模板字符串
在这里插入图片描述

 

相关文章:

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

如果在Form 表单里有通过v-for动态生成&#xff0c;如何设置验证呢&#xff1f; <el-form ref"ruleFormRef" :model"ruleForm" status-icon :rules"rules" label-width"120px"class"demo-ruleForm" hide-required-aster…...

Day 66-68 主动学习之ALEC

代码&#xff1a; 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 遵照如下输出选项&#xff0c;另存为tif格式文件时&#xff0c;选择正确输出便是300dpi以上 2. matlab 文件选项选中导出设置&#xff0c;在渲染中选择dpi为600&#xff0c;导出图片即可&#xff0c;科研建议选择tif格式文件 3.ppt 打开注册表&#xff0c;winr键…...

科技UI图标的制作

科技UI图标的制作&#xff0c;效果图如下&#xff1a; 一、新建合成 1、新建合成&#xff0c;命名为合成1&#xff0c;参数设置如下&#xff1a; 2、新建纯色&#xff0c;命名为分形 二、添加分形杂色 1、添加分形杂色 为纯色层“分形”&#xff0c;添加分形杂色&#xff0c…...

微信小程序将接口返回的文件流预览导出Excel文件并转发

把接口url替换就可以用了 exportExcel () {wx.request({url: importMyApply, //这个地方是你获取二进制流的接口地址method: POST,responseType: "arraybuffer", //特别注意的是此处是请求文件流必须加上的属性&#xff0c;不然你导出到手机上的时候打不开&#xff…...

windows 安装 mongodb 数据库

软件下载 访问官方的下载地址&#xff1a; https://www.mongodb.com/try/download/community &#xff0c;然后选择对应的版本进行下载 下载好了之后双击进行安装 软件安装 1、点击 next 点击下一步 2、勾选接受协议&#xff0c;点击 next 3、第三页有两个选项&#x…...

业务不打烊:解决软件系统升级痛点的新方法

数字化时代&#xff0c;随着用户对产品性能和功能要求的不断提升&#xff0c;应用服务升级成了企业保持竞争力的关键之一。然而&#xff0c;传统的应用服务升级往往会给用户带来不必要的中断和不便&#xff0c;这种“伤筋动骨”的升级方式已经无法满足日益增长的用户需求&#…...

csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

文章目录 ⭐前言⭐利用inscode免费开放资源&#x1f496; 在inscode搭建vue3tsant项目&#x1f496; 调整配置&#x1f496; antd 国际化配置&#x1f496; 用户store&#x1f496; 路由权限&#x1f496; 预览 ⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享…...

通过 CSS 的样式实现语音发送动效类似声音震动的效果

实现效果&#xff1a;一般用于发送语音的时候&#xff0c;出现动画效果 //模版部分 <view class"musical-scale"><view class"scale"><view class"em" v-for"(item,index) in 15" :key"index"></view…...

【C#】.Net Framework框架使用JWT

2023年&#xff0c;第31周&#xff0c;第2篇文章。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; 本篇文章主要简单讲讲&#xff0c;.Net Framework框架下使用JWT的代码例子&#xff0c;以及他们的基本概念。 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第三方电容笔推荐

随着技术的发展&#xff0c;出现了各种各样的平板电容笔。一支好的电容笔&#xff0c;不但可以极大地提升我们的工作效率&#xff0c;还可以极大地提升我们的学习效果。平替的电容笔&#xff0c;无论是在技术方面&#xff0c;还是在质量方面&#xff0c;都还有很大的提升空间&a…...

【Unity2D】相机移动以及设置相机边界

添加相机 添加相机时&#xff0c;首先需要在unity中添加 Cinemachine 包 第一次使用这个包时&#xff0c;需要在Package Manager中搜索并安装 安装Camera Mechine包后&#xff0c;添加2D Camera 设置跟随对象为Ruby &#xff08;从Hierarchy中将Ruby拖动到Follow中&#xff0…...

和chatgpt学架构04-路由开发

目录 1 什么是路由2 如何设置路由2.1 安装依赖2.2 创建路由文件2.3 创建首页2.4 编写HomePage2.5 更新路由配置2.6 让路由生效 3 测试总结 要想使用vue实现页面的灵活跳转&#xff0c;其中路由配置是必不可少的&#xff0c;我们在做开发的时候&#xff0c;先需要了解知识点&…...

Spring MVC异常处理【单个控制异常处理器、全局异常处理器、自定义异常处理器】

目录 一、单个控制器异常处理 1.1 控制器方法 1.2 编写出错页面 1.3 测试结果 二、全局异常处理 2.1 一个有异常的控制器类 2.2 全局异常处理器类 2.3 测试结果 三、自定义异常处理器 3.1 自定义异常处理器 3.2 测试结果 往期专栏&文章相关导读 1. Maven系列…...

使用3ds Max粒子系统创建飞天箭雨特效场景

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 设置箭头 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 我使用多边形建模技术制作了一个简单的箭头&#xff0c;我将 在教程中使用。.max您可以从 下载部分。 箭头.max 步骤 3 将此箭头重命名为静态…...

【朴素贝叶斯实例】

朴素贝叶斯对新闻进行分类 朴素贝叶斯算法是一种常用的文本分类方法&#xff0c;特别适用于自然语言处理任务&#xff0c;如新闻分类。在这篇博客中&#xff0c;我们将使用Python的scikit-learn库来实现朴素贝叶斯算法&#xff0c;并将其应用于新闻分类任务。 数据准备 首先…...

MPAS跨尺度、可变分辨率模式

跨尺度预测模式&#xff08;The Model for Prediction Across Scales - MPAS&#xff09;是由洛斯阿拉莫斯实验室和美国国家大气研究中心(NCAR)共同开发&#xff0c;其由3个部分组成&#xff0c;分别称为 MPAS-A&#xff08;大气模型&#xff09;、MPAS-O&#xff08;海洋模型&…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...