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

news/2024/11/29 12:55:16/

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

 


http://www.ppmy.cn/news/979125.html

相关文章

js中reduce方法的常用应用场景

reduce() 方法可以用来迭代数组并且执行一个回调函数&#xff0c;将数组中的元素聚合成一个单独的值。它可以被用于一系列的操作&#xff0c;如累加求和&#xff0c;计算平均值和查找最大值或最小值等。以下是reduce() 方法的几个应用场景和相应的示例&#xff1a; 求和或求积…

Spring源码(一)Spring底层核心原理解析

Spring核心知识点 本文章将对以下Spring核心知识进行介绍。 1、Bean的生命周期底层原理 2、依赖注入底层原理 3、初始化底层原理 4、推断构造方法底层原理 5、AOP底层原理 6、Spring事务底层原理 这是入门时写的Spring代码 ClassPathXmlApplicationContext context new Cl…

AI绘画StableDiffusion实操教程:月光下的美人(含高清图片)

本教程收集于&#xff1a;AIGC从入门到精通教程汇总 今天继续分享AI绘画实操教程&#xff0c;如何用lora包生成超真实好看质感超强的人物图片。 放大高清图已放到教程包内&#xff0c;需要的可以自取。 出图效果&#xff1a; 更多图片资源访问查看&#xff1a; 教程整合资源…

Go 工具链详解(四): Golang环境变量设置和查看工具 go env

go env 作用 go env 是 Go 工具链中的一个命令&#xff0c;用于设置和查看当前 Golang 环境的相关信息&#xff0c;对于理解、编译和运行 Golang 程序非常有用。 go 提供的命令及 go 程序的编译运行都会使用到环境变量&#xff0c;如果未设置对应的环境变量&#xff0c;go 则…

首批100个集群去年产值超2.5万亿元——中小企业产业集群引领区域发展

产业集群是促进中小企业高质量发展的重要组织形式&#xff0c;是产业链供应链重要组成单元&#xff0c;对推进产业协作和资源共享、产学研协同创新、提高产业组织效率、带动区域经济增长具有重要作用。 截至目前&#xff0c;工信部已在全国范围内认定了100个中小企业特色产业集…

代码随想录额外题目| 数组03 ●34排序数组查首尾位置 ●922按奇偶排序数组II●35搜索插入位置

#34排序数组查首尾位置 medium&#xff0c;我写的:1 暴力 vector<int> searchRange(vector<int>& nums, int target) {int start-1;int end-1;for(int i0;i<nums.size();i){if(nums[i]target && start-1) starti;if(nums[i]target && sta…

零信任安全解决方案

什么是零信任 零信任网络架构 &#xff08;ZTNA&#xff09; 或零信任安全是一种新的组织网络安全方法。它旨在修复传统基于边界的安全性中的缺陷并简化网络设计。 它以“永不信任&#xff0c;始终验证”的原则运作。这意味着&#xff0c;无论用户或设备位于何处&#xff0c;…

Ubuntu-解决包依赖关系

Ubuntu-解决包依赖关系的办法 安装软件包的时候&#xff0c;有时会遇到类似下图的依赖问题&#xff0c;无法正常安装&#xff0c;下面提供三种方法解决依赖问题。 1.可以尝试用下面方法处理依赖问题&#xff0c;紧跟前一条安装命令后面输入下面命令&#xff0c;然后再执行安装…