vue3 element-plus form 表单 循环校验

news2024/9/20 10:41:48

需求:

表单是循环出来的,3个一组,每组对于前端来说是一样的,

需要校验输入框是否必填+是否为小数或者整数

效果:

未输入--显示:请输入

输入不是小数或整数--显示:请输入整数或小数

输入正确:不提示错误信息

template:

主要是每个el-form-item绑定prop带上index

<el-form :label-position="labelPosition" label-width="140px" ref="predictionFormRef" :rules="predictionRules" :model="formLabelAlign">
    <div class="zs-card zs-space-bottom" v-for="(obj, objIndex) in formLabelAlign.group" :key="objIndex">
        <el-form-item label="月份:" :prop="'group.' + objIndex + '.month'"  :required="true">
            <el-input class="zs-full-item" v-model="obj.month" placeholder=" " :disabled="true" />
         </el-form-item>
         <el-form-item label="销售预算:" :prop="'group.' + objIndex + '.salesBudget'" :required="true">
             <el-input class="zs-full-item zs-input-group-md" v-model="obj.salesBudget" placeholder=" " :disabled="true">
                 <template #append><div>万元</div></template>
              </el-input>
          </el-form-item>
          <el-form-item label="销售预测:" :prop="'group.' + objIndex + '.salesPredict'" :rules="predictionRules.salesPredict">
              <el-input class="zs-full-item zs-input-group-white zs-input-group-md" v-model="obj.salesPredict" placeholder="请输入" :disabled="isReadOnly">
                  <template #append><div>万元</div></template>
              </el-input>
          </el-form-item>
    </div>
</el-form>

 data:

let formLabelAlign = ref({
    group: []
})

methods:

校验必填+数据格式:

const checkNumber = (rule, value, callback) => {
    if (isNumberRegex(value)) {
        callback()
    } else {
        callback(new Error('请输入整数或小数'))
    }
}

let predictionRules = reactive({
    salesPredict: [
        {
            required: true, message: '请输入', trigger: 'blur'
        },
        {
            validator: checkNumber, trigger: 'blur'
        }
    ]
})

提交表单时的校验: 

const confirmClick = () => {
    let formList = [predictionFormRef]
    let resultArr = [];
    let validate = (form) => {
        let result = new Promise((resolve, reject) => {
            form.value.validate(valid => {
                if (valid) {
                    resolve()
                } else {
                    reject()
                }
            })
        })
        resultArr.push(result)
    }
    formList.forEach(item => {
        validate(item)
    })
    Promise.all(resultArr).then(() => {
        saveRule() // 校验成功之后 保存数据的方法
    })
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

南京大学软件学院硕士毕业流程

背景介绍 南京大学作为国内顶尖的985高校&#xff0c;拥有丰富的校内资源和雄厚的师资力量。然而&#xff0c;在管理与协调方面仍存在一定的不足。尤其是在硕士生培养过程中&#xff0c;临近毕业阶段的流程中常出现信息不透明和混乱的现象&#xff0c;导致学生在了解所需材料和…

codeforces Round 970 (Div. 3)(A-F)

文章目录 [Codeforces Round 970 (Div. 3)](https://codeforces.com/contest/2008)A-[Sakurakos Exam](https://codeforces.com/contest/2008/problem/A)B-[Square or Not](https://codeforces.com/contest/2008/problem/B)C-[Longest Good Array](https://codeforces.com/cont…

Halcon!!!最新!! 从零认识标定板——制作描述文件和自己的标定板

一.标定板简介 ‌标定板是一种带有固定间距图案阵列的几何模型&#xff0c;主要用于机器视觉、图像测量、摄影测量、三维重建等领域。‌它的主要功能包括校正镜头畸变、确定物理尺寸和像素间的转换关系&#xff0c;以及确定空间物体表面某点的三维几何位置与其在图像中对应点之…

C练手题--Progressive Spiral Number Position 【7 kyu】

一.原题 链接&#xff1a;Training on Progressive Spiral Number Position | Codewars Assume that you started to store items in progressively expanding square location, like this for the first 9 numbers: 二、解题 1、分析 &#xff08;1&#xff09;数字必须存…

自闭症自言自语会好吗

在自闭症儿童的成长过程中&#xff0c;自言自语作为一种常见的行为表现&#xff0c;往往让家长们既担忧又困惑。这种非社交性的语言行为&#xff0c;虽然在一定程度上是自闭症孩子自我交流的方式&#xff0c;但过度或不适宜的自言自语却可能影响其社交技能和日常功能的发展。那…

[米联客-XILINX-H3_CZ08_7100] FPGA程序设计基础实验连载-25 RGB转HDMI显示方案

软件版本&#xff1a;VIVADO2021.1 操作系统&#xff1a;WIN10 64bit 硬件平台&#xff1a;适用 XILINX A7/K7/Z7/ZU/KU 系列 FPGA 实验平台&#xff1a;米联客-MLK-H3-CZ08-7100开发板 板卡获取平台&#xff1a;https://milianke.tmall.com/ 登录“米联客”FPGA社区 http…

3.6 逻辑运算

&#x1f393; 微机原理考点专栏&#xff08;通篇免费&#xff09; 欢迎来到我的微机原理专栏&#xff01;我将帮助你在最短时间内掌握微机原理的核心内容&#xff0c;为你的考研或期末考试保驾护航。 为什么选择我的视频&#xff1f; 全程考点讲解&#xff1a;每一节视频都…

招聘系统开发前景分析

招聘系统的前景分析可以从多个维度进行&#xff0c;包括市场需求、技术趋势、竞争格局以及未来发展趋势等方面。 一、市场需求 持续增长的市场规模&#xff1a;随着全球经济的复苏和数字化转型的加速&#xff0c;企业对高效招聘解决方案的需求不断增加。根据市场数据&#xff…

青书学堂 看视频 看课时 php 懒人版

上一篇关于青书学堂的 操作起来 有点麻烦 趁这几天有时间 优化了一下 建议php 7.3 版本 (本程序会用到php里的curl 模块 记得打开) 如果运行时 获取信息空白(https 容易出现) 可以测试一下自己php的curl能不能正常用 如果不能可以参考一下我的另一篇文章 SSL rtificate …

从0开始深度学习(3)——概率

1 基本概率论 大数定律&#xff08;law of large numbers&#xff09;&#xff1a;随着投掷次数的增加&#xff0c;这个估计值会越来越接近真实的潜在概率。从概率分布中抽取样本的过程称为抽样&#xff08;sampling&#xff09;将概率分配给一些离散选择的分布称为多项分布&a…

【大模型实战篇】RoPE旋转位置编码PyTorch代码分析

1. 背景介绍 之前我们通过两篇技术文章《LLaMA3结构关键模块分析》和《RoPE旋转位置编码底层数学原理分析》对旋转位置编码RoPE的原理进行了必要的讲解。接下来&#xff0c;我们将针对来自rotary-embedding-torch【1】开源库的实现&#xff0c;对RoPE的PyTorch代码实现进行分…

前后端分离的security角色权限实现

本案例是使用SpringBoot2.7.6securityMyBatis-plusVue2axios实现 一、security简介 Spring Security是一个功能强大且高度可定制的身份验证和访问控制框架&#xff0c;专为Java应用程序设计。 &#xff08;1&#xff09;基本功能 身份验证&#xff08;Authentication&#x…

关于安装MySQL遇到的问题

数据库相关概念 &#x1f4a1;数据库系统 &#xff08; DataBase System&#xff0c; 简称 DBS&#xff09; 是指计算机系统引入数据库后的系统构成&#xff0c; 是一个具有管理数据库功能的计算机软硬件综合系统。 数据库系统可以实现有组织地、动态地存储大量数据、提供数…

【补-办公室】拟批语的区别

拟批语 常见拟批语 批示、审示、阅示、核注 审批、审核、审阅、审定&#xff08;订&#xff09;、审发、审议、审处、阅改、阅知、阅研、阅处、研提、研办、研复、核&#xff08;转&#xff09;报、核示、核批、批办等 阅示和审示 区分是收文还是发文 发文审&#xff0c;收文阅…

本地部署AList并挂载小雅超集结合内网穿透实现无公网IP远程访问

文章目录 前言1. 本地部署AList2. AList挂载网盘3. 部署小雅alist3.1 Token获取3.2 部署小雅3.3 挂载小雅alist到AList中 4. Cpolar内网穿透安装5. 创建公网地址6. 配置固定公网地址 &#x1f4a1; 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff…

jenkins-gitee-genkins

在电脑下载git 用一个有war包的项目 下载插件 添加 .ignore文件 添加target 建git仓库 提交 推送 推送完成在gitee能看到 这时候已经完成了前两部 项目如果添加功能

[嵌入式 C 语言] int main(int argc, char *argv[])

一、含义 在C语言中&#xff0c;main 函数是程序的起点&#xff0c;也就是执行的入口点。main 函数可以接受命令行参数&#xff0c;并且通常定义如下&#xff1a; int main(int argc, char *argv[]) int argc: 这个参数代表“参数计数”&#xff08;Argument Count&#xff0…

实验记录 | PointMLP | Grouping layer + Geometric Affine

引言 自 PointNet 腾空出世&#xff0c;点云分析的深度框架便成为了该领域的热点&#xff0c;点云学习网络的发展便一发不可收拾。和大部分深度网络一样&#xff0c;点云网络遵循着 “降采样&#xff0c;聚合特征” 的基本思路&#xff0c;逐步提取点云的深度特征。 大部分点…

【九芯电子】星空灯语音识别芯片方案选型——NRK3301

在快节奏的现代生活中&#xff0c;人们对于居家环境的舒适性与便捷性追求日益增强&#xff0c;而星空灯语音控制的技术诞生&#xff0c;正是这一追求下的智慧结晶&#xff0c;极大地提升了居住的愉悦感与科技感。 九芯NRK3301语音识别芯片‌被广泛应用于智能照明产品中&#xf…

【python因果推断库2】使用 PyMC 模型进行差分-in-差分(Difference in Differences, DID)分析

目录 使用 PyMC 模型进行差分-in-差分&#xff08;Difference in Differences, DID&#xff09;分析 导入数据 分析 使用 PyMC 模型建模银行业数据集 导入数据 分析 1 - 经典 22 差分-in-差分 (DiD) 分析 2 - 具有多个干预前后观测值的差分-in-差分 (DiD) 分析 使用 PyMC…