动态增减表单项 判断

JavaScript动态增减表单项 通过JavaScript 动态的添加表单 删除表单 立即下载
  <div class="customer-form">
          <div
            class="thress-cont"
            v-for="(item, index) in addForm.contactsParamList"
          >
            <div class="thress-cont-item">
              <el-form-item label="姓名" prop="">
                <el-input
                  placeholder="请输入"
                  size="small"
                  v-model="item.customerContactsName"
                ></el-input>
              </el-form-item>
            </div>
            <div class="thress-cont-item">
              <el-form-item label="电话" :prop="`contactsParamList[${index}].phone`" :rules="returnRule('电话')">
                <el-input
                  placeholder="请输入"
                  size="small"
                  v-model="item.phone"
                ></el-input>
              </el-form-item>
            </div>
            <div class="thress-cont-item">
              <el-form-item label="邮箱" :prop="`contactsParamList[${index}].email`" :rules="returnRule('邮箱')">
                <el-input
                  size="small"
                  v-model="item.email"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
            <div
              class="del-cu"
              v-if="index > 0"
              @click.prevent="removeFormCustmer(item)"
            >
              <el-link :underline="false" type="primary"
                ><i class="iconfont icon-delete"></i
              ></el-link>
            </div>
          </div>
        </div>

returnRule(name){
      var rule = []
      if(name == '电话'){
        var obj = {
            pattern: /^1[0-9]{10}$/,
            message: '电话格式不对',
            trigger: 'blur'
        }
        rule.push(obj)
      }else if(name == '邮箱'){
        var obj = {
            pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
            message: '邮箱格式不对',
            trigger: 'blur'
        }
        rule.push(obj)
      }
      return rule
    },



在这里插入图片描述

智能车八邻域图像算法_二 智能车八邻域图像算法 文章目录智能车八邻域图像算法前言一、一些想法二、生长方向的使用1.点的生长方向的表示2. 用点的生长方向来做初步判断1.引入库2.读入数据总结 前言 上一篇里面讲过用八邻域来获得赛道边界:智能车八邻域图像算法 当已经能稳定获得赛道边界时,就可以进行元素识别,获得偏差了。 这里就介绍一下我的一些思路。 早在前两年,优快云上就有一篇关于八邻域如何处理元素的文章第十五届全国大学生智能汽车竞赛-双车组三轮图像处理总结,写得很好,我当时也参考了这篇文章,但是我觉得不是很详细,所以我这里想写得 阅读详情

相关推荐

9.Vue前端使用iframe集成帆软报表的单点登录

CPT普通报表的地址:【帆软的服务http】+【/webroot/decision/view/report?【帆软的服务http】+【/webroot/decision/view/form?// fineReportHttp:帆软部署的地址。//如果为ie浏览器则页面加载完成后立即执行。// fineLinkSrc:帆软报表的url。//其他浏览器则重新加载onload事件。// 拿到配置的帆软报表的地址参数。//判断是否为ie浏览器。// 帆软报表登录和打开。// 帆软报表登录和打开。

qq_27860623的博客 4649

动态增减表单详解

不知道小伙伴们有没有做过类似的功能,效果图如下 看到这个需求的一瞬间小编瞬间陷入了思维逻辑的坑里,想着垃圾桶旁边的提示信息直接放一个插值表达式,插值表达式直接放入,上边输入框v-model绑定的值不就好了。结果做好了增加第一个表单的时候功能是没问题的,相信已经有小伙伴发现了问题所在,增加第二个表单的时候你就会发现第一个表单垃圾桶旁边的提示信息跟第二个增加的表单提示信息是一样的,而且当你上边输入框清空内有内容的时候你会惊奇的发现,两个表单垃圾桶旁边的提示信息都是空的,为什么呢?这是因为插值表达式内填

m0_59078472的博客 1425

STM8S全解析之系列文章4---STM8S芯片项目升级引导程序(使用中断接收升级数据)

STM8S全解析之系列文章4—STM8S芯片项目升级引导程序(使用中断接收升级数据) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第一章 Python 机器学习入门之pandas的使用 文章目录STM8S全解析之系列文章4---STM8S芯片项目升级引导程序(使用中断接收升级数据)前言一、Flash划分boot和App二、使用步骤1.引入库2.读入数据总结 前言 用过STM8S都知道它没有中断向量重定向,也就意味着STM8S的中断向量没办法指向其他的位置,间接说明升级的引导

weixin_39853312的博客 1031

【Vue入门实战6】【ElementUI组件使用优化】el-form动态增减表单项==> el-table自定义列数并动态加载列 ==> 处理后端复杂数据结构==>回显动态列数据

【Vue入门实战6】【ElementUI组件使用优化】el-form动态增减表单项==> el-table自定义列数并动态加载列 ==> 处理后端复杂数据结构==>回显动态列数据

Sabrina_cc的博客 4853

手把手教你用Ubuntu 22.04的附加驱动工具安装NVIDIA显卡驱动(含常见错误修复)

本文详细介绍了在Ubuntu 22.04系统上,如何通过图形化的“附加驱动”工具安全、便捷地安装NVIDIA显卡驱动。内容涵盖从准备工作、禁用默认的nouveau驱动、图形界面安装实操,到安装后的验证(如使用nvidia-smi命令),并提供了安装失败黑屏、亮度调节失效等常见问题的深度解决方案,帮助用户彻底搞定驱动安装难题。

weixin_29248653的博客 602

【毕业设计参考】基于yolov8+pyqt5自适应界面设计的锂电池表面缺陷检测系统

基于YOLOv8+PyQt5的锂电池表面缺陷检测系统结合了先进的目标检测技术与友好的用户界面设计,为锂电池质量检测提供了一种高效、准确的解决方案。未来,随着深度学习技术的不断发展,我们可以进一步优化模型,提高检测精度和速度,同时拓展系统功能,如实现实时视频流检测、与生产系统的深度集成等,为锂电池产业的发展注入新的活力。希望本文对大家在相关领域的研究和实践有所帮助,欢迎大家在评论区交流讨论。

1182

正则表达式

1、规则 例如:手机号码的规则:1. 11位数字 2.第一位必须是1 /^1\d{10}$/ /^1[0-9]{10} $/ 邮箱 123_hello@163.com hello@sina.com.cn /^ \w+@[0-9a-zA-Z]{2,4}.[a-zA-Z]{2,3} (.[a-zA-Z]{2,3})? $/ 比较常用的: 一、校验数字...

qq_38189467的博客 2044

【数电课程设计】---出租车计价器

文章目录1、任务要求2、方案3、收获 1、任务要求 2、方案 3、收获

LZY 1万+

PHP学习笔记 正则表达式 9.23

正则表达式

weixin_45744975的博客 300

Silvaco TCAD仿真例库——肖特基二极管反向击穿特性(案例)

本文详细解析了使用Silvaco TCAD仿真例库进行肖特基二极管反向击穿特性分析的完整案例。通过构建包含浮空P型保护环的平面结构,重点阐述了针对雪崩击穿仿真的关键步骤,包括高精度网格划分、碰撞电离模型(impact selb)的启用以及反向电压的精细扫描策略。文章深入探讨了漂移区掺杂浓度、保护环设计等参数对击穿电压的影响,并提供了实用的调试心得,旨在帮助工程师精准预测和优化功率肖特基二极管的反向耐压能力。

fire9的博客 724

E28 LoRa模块透传 定点传输 RSSI测试与MicroPython应用

测试说明 测试模块数:3 测试模式:配置模式和传输模式 如果没有检测到串口,首先检查是否安装串口驱动CH341SER,下载链接,提取码:vaw2 工作模式 模式(0-3) M2 M1 M0 模式介绍 备注 0 传输模式 1 0 0 串口打开,无线打开,连续透明传输 空速支持手动配置和自适应波特率自动调节;连续模式双方波特率必须一致 1 RSSI 1 0 1 串口打开,无线打开,RSSI功能打开 模块每100ms输出RSSI强度值 2 测距模式 1 1 0 保留 - 3 配置模式

GniLAY1022的博客 4243

el-form 动态表单增减项 (vue+element ui)

el-form-item(表单项)循环,绑定的数组写在form当中。1、点击”+“,弹出弹窗,新增一项,点击”-“,删除当前项。1、点击新增,弹出新增弹窗,添加表单项。2、点击”-“,删除当前表单项。

m0_67624022的博客 3351

【网络】叶脊(Spine-Leaf)网络拓扑下全三层网络设计与实践(二) - 网络规划

2. 全三层架构设计思路 采用全三层网络架构设计的出发点是: 使用尽量少的交换机高级功能,可以尽可能减少由于功能bug故障造成的问题; 使用尽量少的网络协议,以兼容不通厂商的网络设备 实现简单,易于维护,绝对可靠的路由协议; 通过控制路由来调度流量,尽量减少设备或协议的故障域; 牺牲高级功能带来的便捷,得到更高的可用性和性能; 由上述原则,本文的设计选择只使用静态路由和BGP...

因吹斯汀 1万+

【Vue】动态增减表单、表单验证

        业务需求:在添加维度时,需要为其动态添加子维度,要求至少一个且名称不能重复,同时进行表单验证。vue页面代码如下: &lt;template&gt; &lt;div&gt; &lt;el-form class="mt10 pd10 elForm" ref="form" :model="form" label-width="130px" :label-posi

Mr_EvanChen的Blog 5926

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

antd 动态增减表单项的使用

我们说一下时间段交叉校验,validatorr: async (rule, value) =>{} 用于自定义校验规则,然后使用Promise去返回校验响应。rule中包含着当前字段field,其中包含着当前字段(时间选择器)的索引值,value是我们当前时间选择器中选中的时间。如下当检验函数返回true 我们会进行提示每个”购买时间段之间不可时间交叉“(这里用到Promise.reject)。中的所以时间段比较(但是不要和其自身比较),所以收集一下当前选中的时间选择器的索引值。

qq_39008205的博客 2853

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

动态增减表单项的使用

动态增减表单项的使用

m0_52244931的博客 325

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

ant.d中动态增减表单项

ant.d中动态增减表单项介绍实现 介绍 项目中经常会用到动态增减表单的需求,虽然ant.design官网也有相关的demo代码演示,但在实际的应用项目中需要动态增减的表单远远比demo复杂多了,具体如何实现呢?先来看看我们实现后的具体效果是什么样的吧: 实现 初始化时默认有一条 一条时不允许删除 可以设置key 校验不能重复 import React, { Component, Fragm...

weixin_43443341的博客 1866

vue + element-ui 动态增减表单的添加、删除和修改问题_element动态增减表单项(1)

面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】7517563)][外链图片转存中…(img-cJOJsduR-1715797517564)][外链图片转存中…(img-v61BhmyC-1715797517564)][外链图片转存中…(img-UFbax4iP-1715797517565)]

2401_84617533的博客 1135

vue + element-ui 动态增减表单的添加、删除和修改问题_element动态增减表单项

最近在写毕设时,我遇到了做出动态增减表单这一需求,但在实现的过程中遇到了不少问题,接下来主要记录动态表单修改问题的解决过程。

2401_85124119的博客 719

ElementUI的的动态增减表单及表单验证

ElementUI的的动态增减表单 1、根据需求:做一个如下图的表单,当只有一列时,无法进行删除操作,且表单必须校验 2、根据ElementUI的动态增减表单项,可得知 通过v-for循环可动态增减表单 通过:prop="'domains.' + index + '.value'"可进行验证 3、data里的写法 data(){ return { ruleformPro: { list: [ { fbxBoxNoPro: "",

qq_43378800的博客 4042

关于iview表单验证的问题:动态增减项、多个表单同时验证、select下拉框验证问题等

一、Form表单中一条FormItem里有多个输入框,但只需要验证其中几个 <template> <div> <Form ref="formDynamic" :model="formDynamic" :rules="ruleValidate" :key="tableId"> <FormItem v-for="(item, index) in currentShow " :key="index">

yang_927的博客 2626

【2.0版本】可自行增减的动态表单

动态表单介绍效果图单个动态表单效果图多个动态表单效果图重点部分讲解正常情况下,表单prop定义:而动态表单定义:正常情况下,data定义:而动态表单的data定义:事件:`标记`:多个动态表单代码: 介绍 关注编者博客的都知道小编的文章中有一篇动态表单文章,跳转链接,话说这篇文章写的是真的,,,,差,这篇文章小编就暂时不删了,留着提醒小编。好了,估计你看到这都烦了吧!!! 小白话不多说,下面就是对你们好的时候,直接放效果图,看各位是否喜欢,说错了,怎么能是喜欢呢,呸呸呸,应该是否符合你的口味,都看这了眼神下

~牧马~ 1263

vue + element-ui 动态增减表单的添加、删除和修改问题

本篇是我的第一个博客,主要记录动态表单功能的实现以及动态表单修改问题的解决过程

I am atomic 的博客 4047

element框架动态增减表单验证

el-form动态添加删除表单验证

CCC_chtt的博客 568

vue + element-ui 动态增减表单的添加、删除和修改问题_element动态增减表单项(2)

我的想法是:利用这段代码,在点击修改时根据提交的 输入框个数 和 输入框的值 进行判断,如果是非空值,则执行一次上面的代码。这样就实现了对应数量的输入框的加载。简要概括一下 HTTP 的特点?HTTP 有哪些缺点?HTTP1.1 如何解决 HTTP 的队头阻塞问题?对于定长和不定长的数据,HTTP 是怎么传输的?浏览器如何拦截响应?HTTP 中如何处理表单数据的提交?如何理解 HTTP 缓存及缓存代理?HTTP 如何处理大文件的传输?HTTP 报文结构是怎样的?如何理解 HTTP 状态码?

2401_84617533的博客 424

elementUI动态表单 + el-select 按要求禁用

项目通过 vue+elementUI 实现 近期开发过程中遇到一个需求,对于从事两年的“小白”来说,确实费了点脑子,才发现,好像是自己一开始想太多了,各种情况设想了一溜够,发现只要反过来想就OK了 ╮(╯▽╰)╭ 需求大概是这样的: 在动态增减的表单项中,有一个下拉菜单,要求每选择一项,就把选中过的那一个选项禁用(简单来说就是,已经选过的就不能再选了),且增加的条数不能超过下拉菜单中的选项数量 直接上图吧(label不重要,主要看效果。。。) 先实现最简单的:限制新增数量 判断已新增的数量是否小于下拉菜单

nothing_2020的博客 9865
上一篇: VUE开发--数字滚动CountTo
下一篇: element popover 动态渲染数据 第一次点击漂移问题
青柠97
博客等级 码龄8年 29粉丝 84原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值