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

news2024/11/15 8:36:29

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

 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=''
     
    }

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

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

相关文章

【数据结构-零基础学习】线索二叉树(代码+图示+解析)

【数据结构-零基础学习】线索二叉树(代码图示解析) 文章目录 【数据结构-零基础学习】线索二叉树(代码图示解析)[toc]定义产生背景种类示意图1)未加入线索的普通二叉树示意图1.12)线索添加的规则3)中序线索二叉树示意图1.24)中序线索二叉树分析示意图1.3 设计代码逻辑(重点)代码…

户外耳机推荐,这几款高性价比的户外耳机不容错过!

对于喜欢户外运动的人来说&#xff0c;在耳机的选择上至关重要&#xff0c;推荐使用骨传导运动耳机的&#xff0c;因为相较于普通的入耳式耳机&#xff0c;前者是通过振动来传输声音的&#xff0c;而后者则是通过空气传导到耳内的。如果是在户外跑步听不到周围环境声音和鸣笛声…

振南技术干货集:制冷设备大型IoT监测项目研发纪实(2)

注解目录 1.制冷设备的监测迫在眉睫 1.1 冷食的利润贡献 1.2 冷设监测系统的困难 &#xff08;制冷设备对于便利店为何如何重要&#xff1f;了解一下你所不知道的便利店和新零售行业。关于电力线载波通信的论战。&#xff09; 2、电路设计 2.1 防护电路 2.1.1 强电防护 …

vue超好用的自定义指令封装

一、指令封装 目录结构&#xff1a; index.ts 统一注册 import { App, Directive } from "vue"; import auth from "./modules/auth"; import copy from "./modules/copy"; import waterMarker from "./modules/waterMarker"; impor…

Python简直是万能的,这5大主要用途你一定要知道!

从2015开始国内就开始慢慢接触Python了&#xff0c;从16年开始Python就已经在国内的热度更高了&#xff0c;目前也可以算的上"全民Python"了。 众所周知小学生的教材里面已经有Python了&#xff0c;国家二级计算机证也需要学习Python了&#xff01; 因为Python简单…

基于springboot实现冬奥会科普平台系统【项目源码+论文说明】计算机毕业设计

基于SpringBoot实现冬奥会科普平台系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理平台应运而生&…

CSS实现空心的“尖角”

大家好&#xff0c;我是南宫&#xff0c;来分享一个昨天解决的问题。 我记得之前刷面试题的时候&#xff0c;CSS面试题里面赫然有一题是“如何用CSS实现三角形”&#xff0c;我觉得这个问题确实很经典&#xff0c;我上的前端培训班当初就讲过。 大概思路如下&#xff1a; 先…

Redis -- 介绍

1、NoSQL: 指的是非关系型数据库&#xff0c;主要分成四大类&#xff1a;键值存储数据库、列存储数据库、文档型数据库、图形数据库。 2、什么是Redis&#xff1a; Redis是一种基于内存的数据库&#xff0c;一般用于做缓存的中间件。 3、Redis的主要的特点&#xff1a; 1、Rd…

埃尔米特插值(hermite 插值) C++

埃尔米特插值 原理 #pragma once #include <vector> #include <functional> /*埃尔米特插值*/ struct InterpolationPoint {double x; // 插值点的横坐标double y; // 插值点的纵坐标double derivative; // 插值点的导数值// 默认构造函数InterpolationPoint() : x…

一个测试驱动的Spring Boot应用程序开发

文章目录 系统任务用户故事搭建开发环境Web应用的框架Spring Boot 自动配置三层架构领域建模域定义与领域驱动设计领域类 业务逻辑功能随机的Challenge验证 表示层RESTSpring Boot和REST API设计API第一个控制器序列化的工作方式使用Spring Boot测试控制器 小结 这里采用面向需…

str转wstr的三种方法和从网站获取json数据到数据随机提取,返回拼接字符串和动态数组

库的设置 hv库 外部包含目录&#xff1a;…\include\libhv_new\hv; 库目录&#xff1a;…\include\libhv_new\lib\x86\Release; 附加依赖项&#xff1a;hv.lib; //Get请求 获取json数据&#xff0c;然后提取符合 条件的&#xff0c;time值大于自定义变量的值&#xff0c;然后取…

老知识复盘-SQL从提交到执行到底经历了什么 | 京东云技术团队

一、什么是SQL sql(Structured Query Language: 结构化查询语言)是高级的费过程化编程语言,允许用户在高层数据结构上工作, 是一种数据查询和程序设计语言, 也是(ANSI)的一项标准的计算机语言. but… 目前仍然存在着许多不同版本的sql语言,为了与ANSI标准相兼容, 它们必须以相…

webpack 创建typescript项目

【视频链接】尚硅谷TypeScript教程&#xff08;李立超老师TS新课&#xff09; 创建webpack 项目 IDE&#xff1a;webstorm 新建一个空的项目运行npm init初始化项目目录结构 1. 安装 webpack&#xff1a;构建工具webpack-cli&#xff1a; webpack的命令行工具typescript&am…

处理无线debug问题

无限debug的产生 条件说明 开发者工具是打开状态 js代码中有debugger js有定时处理 setInterval(() > {(function (a) {return (function (a) {return (Function(Function(arguments[0]" a ")()))})(a)})(bugger)(de, 0, 0, (0, 0)); }, 1000); ​ #这里就…

【论文阅读】An Experimental Survey of Missing Data Imputation Algorithms

论文地址&#xff1a;An Experimental Survey of Missing Data Imputation Algorithms | IEEE Journals & Magazine | IEEE Xplore 处理缺失数据最简单的方法就是是丢弃缺失值的样本&#xff0c;但这会使得数据更加不完整并且导致偏差或影响结果的代表性。因此&#xff0c;…

wpf使用CefSharp.OffScreen模拟网页登录,并获取身份cookie

目录 框架信息&#xff1a;MainWindow.xamlMainWindow.xaml.cs爬取逻辑模拟登录拦截请求Cookie获取 CookieVisitorHandle 框架信息&#xff1a; CefSharp.OffScreen.NETCore 119.1.20 MainWindow.xaml <Window x:Class"Wpf_CHZC_Img_Identy_ApiDataGet.MainWindow&qu…

虚函数可不可以重载为内联 —— 在开启最大优化时gcc、clang和msvc的表现

下面是对该问题的一种常见回答&#xff1a; 首先&#xff0c;内联是程序员对编译器的一种建议&#xff0c;因此可以在在重载虚函数时在声明处加上inline关键字来修饰&#xff0c; 但是因为虚函数在运行时通过虚函数表&#xff0c;而内联函数在编译时进行代码嵌入&#xff0c;因…

【Spring】之IoC与对象存取

未来的几周时间&#xff0c;大概率我会更新一下Spring家族的一些简单知识。而什么是Spring家族&#xff0c;好多同学还不是很清楚&#xff0c;我先来简单介绍一下吧&#xff1a; 所谓Spring家族&#xff0c;它其实就是一个框架&#xff0c;是基于Servlet再次进行封装的内容。为…

SpringBoot启动后自动打开浏览器访问项目

更简单的一个方法 Runtime.getRuntime().exec("rundll32 url.dll,FileProtocolHandler " url); Springboot项目启动后自动打开浏览器访问(超实用)_浏览器访问springboot项目-CSDN博客 Springboot项目启动后自动打开浏览器访问 1、在Springboot项目中每次启动完项…

DeepWalk: Online Learning of Social Representations(2014 ACM SIGKDD)

DeepWalk: Online Learning of Social Representations----《DeepWalk&#xff1a;用于图节点嵌入的在线机器学习算法》 DeepWalk 是将 word2vector 用到 GNN 上 DeepWalk&#xff1a; 将 Graph 的每个节点编码为一个 D 维向量&#xff08;无监督学习&#xff09;&#xff0c;E…