脱离form表单校验input(校验单个input输入框)提交时边框变红

 把需要自定义校验的数据放在一个对象中,方便以后多个字段校验

 customVerifyInps:{
    communityInp2:"",
    asPathInp:"",
  },

在输入框中绑定id

<el-input
  id="communityInp2"
  placeholder=""
  v-model="customVerifyInps.communityInp2"
  :validate-event="true"
  >
</el-input>

在你提交事件中加上校验方法(根据场景加对应的的方法,我这里是点击事件后出发),通过document获取到目标元素改变他的边框

UpdateAllClick(){
        // 校验
        let type=false
        for (let i in this.customVerifyInps){
          if (this.customVerifyInps[i]==''){
            document.querySelector('#'+i).style.borderColor='red'
            type=true
          }
        }
        if (type){
              return this.$message({
              message: '检查表单是否填写完整。',
              type: 'error'
            });
        }
    },

当输入内容是需要红色边框,加个input事件内容改变就还原边框颜色

 <el-input
   id="asPathInp"
   placeholder=""
   v-model="customVerifyInps.asPathInp"
   :validate-event="true"
   @input="inputEnv('asPathInp')"
   >
</el-input>
// 输入框输入事件
    inputEnv(name){
        document.querySelector('#'+name).style.borderColor=''
     
    }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

API给电商带来了哪些变化?

随着数字化和网络化程度的不断加深&#xff0c;电商行业在过去的几年里经历了翻天覆地的变化。其中&#xff0c;API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;在电商领域的应用&#xff0c;不仅改变了电商行业的运作方式&#xf…

5-Nacos环境搭建

本文介绍nacos集群环境的搭建。 1、基础环境 机器&#xff1a;mac&#xff0c;intel版本jdk&#xff1a;1.8数据库&#xff1a;mysql 8.029nacos&#xff1a;2.03 2、下载 nacos点击这里下载。 3、开始配置 这里搭建在自己机器上搭建两台nacos集群。下载完成后&#xff0…

windows 查看防火墙设置命令使用方法

点击键盘上windows键&#xff0c;输入cmd&#xff0c;选择以管理员身份运行 输入下面命令查看使用说明 netsh advfirewall firewall add rule ? 发现显示不全&#xff0c;不方便看 可以输入下面命令&#xff0c;生成文件&#xff0c;方便查看 netsh advfirewall firewall ad…

浙大恩特客户资源管理系统fileupload.jsp,machord_doc.jsp接口任意文件上传漏洞复现 [附POC]

文章目录 浙大恩特客户资源管理系统fileupload.jsp,machord_doc.jsp接口任意文件上传漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 浙大恩特客户资源管理系统fileupload.jsp,machord_doc.jsp接…

Shell脚本:Linux Shell脚本学习指南(第二部分Shell编程)一

第二部分&#xff1a;Shell编程&#xff08;一&#xff09; 这一章我们正式进入 Shell 脚本编程&#xff0c;重点讲解变量、字符串、数组、数学计算、选择结构、循环结构和函数。 Shell 的编程思想虽然和 C、Java、Python、C# 等其它编程语言类似&#xff0c;但是在语法细节方…

白炽灯护眼还是LED护眼?眼科专家都推荐的护眼台灯分享

白炽灯和LED灯相比&#xff0c;我认为还是LED灯会更护眼一些。因为LED灯长时间照射&#xff0c;温度也不会变得很高&#xff0c;这就说明了LED灯的散热效果好&#xff0c;安全性高&#xff0c;而且光线散发会比较均匀。 白炽灯是通过发热发光的&#xff0c;大部分能量都转化为了…

NX二次开发UF_CAM_ask_lower_limit_plane_usage 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;里海NX二次开发3000例专栏 UF_CAM_ask_lower_limit_plane_usage Defined in: uf_cam_planes.h int UF_CAM_ask_lower_limit_plane_usage(tag_t object_tag, UF_PARAM_lwplane_usage_t * usage ) overview 概述 Query the usa…

【2021集创赛】IEEE杯一等奖:一种28GHz高能效Outphasing PA设计

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 团队介绍 参赛单位&#xff1a;电子科技大学 队伍名称&#xff1a;PA调得队 指导老师&#xff1a;王政 参赛队员&#xff1a;倪梦虎、杨茂旋、张振翼 总决赛奖项&#xff1a;一等奖 1.项…

ADE XL 工艺角corner仿真

在ADE L界面打开ADE XL 建立一个新的ADE XL 点击click to add corner 添加工艺角 点击图标添加三个工艺角 点击model files里面的click to add 添加model 文件。点击import from tests&#xff0c;点击ok 填好红框内容&#xff0c;点击ok 可以看到添加好的工艺角&#xff0c;双…

滚雪球学Java(09-6):Java中的条件运算符,你真的掌握了吗?

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java SE相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…

亿图图示9.4——办公人士的瑞士刀

今天博主将带来一款强悍的制图软件——亿图图示。相信接触过万兴喵影的同学们&#xff0c;对万兴科技都不陌生。今天学长带来的亿图图示&#xff0c;也是其旗下产品哦。亿图图示&#xff0c;即亿图图示专家(EDraw Max)&#xff0c;是一款基于矢量的绘图工具&#xff0c;包含大量…

Linux安装rabbitMq(亲测可用)解决只能本地访问的问题

安装er https://blog.csdn.net/laterstage/article/details/131513793?spm1001.2014.3001.5501下载mq wget --content-disposition "https://packagecloud.io/rabbitmq/rabbitmq-server/packages/el/7/rabbitmq-server-3.10.0-1.el7.noarch.rpm/download.rpm?distro_v…

从字典到 CookieJar 的转换技巧

在使用requests库进行HTTP请求时&#xff0c;经常需要传递cookies参数来实现一些特定的功能&#xff0c;例如保持用户会话状态或者进行身份验证。 在HTTP请求中&#xff0c;Cookie是一种用来在客户端和服务器之间传递状态信息的方式&#xff0c;通常用于记录用户的身份验证信息…

智慧城市科普:最近很火的概念“智慧城市 ”到底是啥?

在当今飞速发展的数字时代&#xff0c;智慧城市的兴起成为城市管理与科技创新的焦点。本文将深入科学原理和技术细节&#xff0c;揭示智慧城市的奥秘&#xff0c;以及它对城市未来发展的深远影响。 1. 智慧城市的概念&#xff1a; 智慧城市并非抽象的未来愿景&#xff0c;而是…

SpringCloud之Feign

文章目录 前言一、Feign的介绍二、定义和使用Feign客户端1、导入依赖2、添加EnableFeignClients注解3、编写FeignClient接口4、用Feign客户端代替RestTemplate 三、自定义Feign的配置1、配置文件方式全局生效局部生效 2、java代码方式 四、Feign的性能优化连接池配置 五、Feign…

一种可度量的测试体系-精准测试

行业现状 软件行业长期存在一个痛点&#xff0c;即测试效果无法度量。通常依赖于测试人员的能力和经验&#xff0c;测试结果往往不可控&#xff0c;极端情况下同一个业务功能&#xff0c;即使是同一个人员在不同的时间段&#xff0c;测试场景和过程也可能不一致&#xff0c;从而…

【Windows 常用工具系列 11 -- win11怎么设置不睡眠熄屏 |win11设置永不睡眠的方法】

文章目录 win11 怎么设置不睡眠熄屏 使用笔记本电脑的时候&#xff0c;如果离开电脑时间稍微长一点就会发现息屏了&#xff0c;下面介绍 设置 Win11 永不睡眠息屏的方法&#xff0c;有需要的朋友们快来看看以下详细的教程。 win11 怎么设置不睡眠熄屏 在电脑桌面上&#xff0c…

jenkins传参给robotframework

在做自动化的时候&#xff0c;需要使用jenkins传参给rf&#xff0c;rf根据传来的变量运行&#xff0c;在将变量传递给py脚本文件。特此记录。 一、配置jenkins 构建的命令使用如下格式即可&#xff08;注意空格&#xff09;&#xff1a; cd D:\xxx\test call pybot --variabl…

leetcode 每日一题复盘(11.20~11.26)

leetcode 746 使用最小花费爬楼梯 虽然是简单题但还是要说一下,感觉做题的思路还是不够清晰,好的是知道状态是最低花费,知道围绕所求的目标进行展开,倒推出递推公式 一开始写的递推公式是dp[i]dp[i-1]min(cost[i-2],cost[i-1]),写出了一个类似贪心算法的东西,归根结底还是对dp…

[Spring Cloud] Nacos 实战 + Aws云服务器

文章目录 前言一、拥有一台Aws Linux服务器1.1、选择Ubuntu版本Linux系统1.2、创建新密钥对1.3、网络设置1.4、配置成功&#xff0c;启动实例1.5、回到实例区域1.6、进入具体的实例1.7、设置安全组 二、在Mac上连接Aws云服务&#xff0c;并安装配置JDK112.1、解决离奇的错误2.2…