Element-ui自定义input框非空校验

news2024/11/19 19:35:13

1、vue自定义非空指令:

main.js中自定义非空指令
当input框或下拉框中数据更新时,触发校验

Vue.directive('isEmpty',{
  update:function(el,binding,vnode){
    if(vnode.componentInstance.value==""){
      el.classList.add("is-required");
    }else if(vnode.componentInstance.value||vnode.componentInstance.value==0){
      el.classList.remove("is-required");
    }
  }
})

2、css 全局添加必填样式:

.is-required input{
  border-color:red!important
}

3、具体应用:

<el-select placeholder="请选择" v-isEmpty v-model="form.name"></el-select>

<el-input v-isEmpty v-model="form.age" />

4、寄语:

过去这一年,你最大的收获是什么呢?
不一定要“战绩赫赫”,
不一定要“大有所成”,
捞出属于你的“星星”即可!
拥有那些“不负生活”的闪亮时刻即可!

在这里插入图片描述

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

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

相关文章

使用echarts的bmap配置项绘制区域轮廓遮罩

示例图 代码 <template><div id"map" style"width: 100%; height: 100vh"></div> </template><script> import * as echarts from "echarts"; import "echarts/extension/bmap/bmap"; export default…

软件测试/测试开发丨Pytest结合数据驱动

安装yaml pip install pyyaml pytest结合数据驱动yaml 工程目录结构 数据准备 读取excel文件 openpyxl库的安装 openpyxl库的操作 pytest结合csv实现数据驱动 csv文件介绍 pytest结合json实现数据驱动 最后感谢每一个认真阅读我文章的人&#xff0c;礼尚往来总是要有的&…

Halcon底帽运算bottom_hat

Halcon底帽运算 底帽运算的原理是用原始的二值图像减去闭运算的图像。闭运算的目的是对某些局部区域进行“填补”&#xff0c;如填空洞、使分离的边缘相连接等。而底帽运算正是用来提取这些用于填补的区域的。图&#xff08;a&#xff09;为从二值图像中提取出的亮的区域&…

RKE安装k8s及部署高可用rancher,证书在外面的LB(nginx中)

一 了解 Rancher 1 推荐架构 安装 Rancher 的方式有两种&#xff1a;单节点安装和高可用集群安装。因为单节点安装只适用于测试和 demo 环境&#xff0c;而且单节点安装和高可用集群安装之间不能进行数据迁移&#xff0c;所以推荐从一开始就使用高可用集群安装的方式安装 Ran…

Vue Cli inspect

Vue Cli inspect vue-cli-service inspect&#xff1a;可以使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config 使用方法&#xff1a; 1、输出在控制台&#xff1a;vue-cli-service inspect 2、输在在文件中&#xff1a;vue-cli-service inspect -->…

阿里云迁移AWS视频点播技术攻坚

文章目录 &#x1f437; 背景&#x1f9a5; 简述&#x1f425; Aws服务&#x1f99c; AWS CloudFormation&#x1f41e; 问题&#x1f409; 落地方案&#x1f989; Aws vs Aliyun&#x1f344; 避坑指南 &#x1f437; 背景 由于AWS整体成本略低于阿里云&#xff0c;公司决定将…

k8s集群部署Harbor镜像仓库

部署k8s集群参考 https://blog.csdn.net/m0_59933574/article/details/134936188?spm1001.2014.3001.5502https://blog.csdn.net/m0_59933574/article/details/134936188?spm1001.2014.3001.5502 安装Harbor 准备一台干净服务器&#xff0c;关闭防火墙与selinux 下载dock…

rime中州韵 inputShow lua Filter

在 rime中州韵 inputShow lua Translator 一文中&#xff0c;我们通过 inputShow.lua 定制了 inputShow_translator&#xff0c;这使得我们的输入方案可以将用户输入的字符透传到候选列表中来。如下&#x1f447;&#xff1a; &#x1f446;上图中我们在候选列表中看到了 inpu…

C# WinForm MessageBox自定义按键文本 COM组件版

c# 更改弹窗MessageBox按钮文字_c# messagebox.show 字体-CSDN博客 需要用到大佬上传到百度云盘的Hook类&#xff0c;在大佬给的例子的基础上改动了点。 应用时自己加GUID和ProgID。 组件实现&#xff1a; using System; using System.Collections.Generic; using System.L…

Flink Watermark和时间语义

Flink 中的时间语义 时间语义&#xff1a;EventTime&#xff1a;事件创建时间&#xff1b;Ingestion Time&#xff1a;数据进入 Flink 的时间&#xff1b;Processing Time&#xff1a;执行操作算子的本地系统时间&#xff0c;与机器无关。不同的时间语义有不同的应用场合&#…

MySQL之四大引擎、建库建表以及账号管理

目录 一.四大引擎 1.1 InnoDB 1.2 MyISAM 1.3 MEMORY 1.4 Archive 二.数据库管理 2.1 元数据库简介 2.2 元数据库分类 2.3 数据库的增删改查及使用 2.4 MySQL库权限相关 三.数据表管理 3.1 三大范式 3.2 基本数据类型 3.2.1 优化原则 3.2.2 分类 四.数据库账号管理 4.1 相同…

LabVIEW在高精度机器人视觉定位系统中的应用

在现代工业自动化中&#xff0c;精确的机器人视觉定位系统对于提高生产效率和产品质量至关重要。LabVIEW软件&#xff0c;以其卓越的图像处理和自动化控制功能&#xff0c;在这一领域发挥着重要作用。本案例将展示LabVIEW如何帮助开发和实现一个高精度的机器人视觉定位系统&…

【WPF.NET开发】WPF中的输入

本文内容 输入 API事件路由处理输入事件文本输入触摸和操作侧重点鼠标位置鼠标捕获命令输入系统和基元素 Windows Presentation Foundation (WPF) 子系统提供了一个功能强大的 API&#xff0c;用于从各种设备&#xff08;包括鼠标、键盘、触摸和触笔&#xff09;获取输入。 本…

easycython和cython将py编译为pyd对比

前提了解 为了实验的准确性,在全过程使用的python环境版本都为同一版本 easycython和cython编译为pyd文件的不同在于,easycython编译的原始文件后缀为pyx,cython编译的原始文件为py 1.cython 1.1原始文件 def ZWHCythonTest():print("Z_W_H_") def ZWHCython…

C语言数组习题

1.数组遍历 #include <stdio.h>int main(){int i,a[10];for(i0;i<9;i) //对数组元素a[0]~a[9]赋值 a[i]i;for(i9;i>0;i--) //输出a[9]~a[0]共10个数组元素 printf("%d ",a[i]);printf("\n");return 0;} 运行结果&#xff1a; 2.数组应用&a…

IOS - 手机安装包 ipa 常见几种方式

安装 ipa 包的方法有很多中&#xff0c;可以通过不同的软件安装&#xff0c;本文只列出了常用的几种&#xff0c;做个简单的归纳整理 1、iTunes 安装 数据线连接手机之后&#xff0c;会自动连接iTunes&#xff0c;&#xff08;第一次连接的时候会提示是否信任此电脑&#xff0…

Git管理项目

大家好我是苏麟 , 今天和大家聊聊用Git管理项目 . 一步一步上传到Git仓库 . 1.找到VCS点击创建Git仓库 2.点击目录 3.点击绿色对号提交 4.点击提交 5.点击提交 6.成功提交到本地 7.打开GitLab 或 Gitee 或 GitHub 并创建项目 (注意 : 这里一定是什么都没有的) 否则一会上传是…

[足式机器人]Part2 Dr. CAN学习笔记-自动控制原理Ch1-9PID控制器

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-自动控制原理Ch1-9PID控制器&#xff09; P —— Proportional I —— Integral D —— Derivative 当前误差/过去误差/误差的变化趋势 K p ⋅ e K_{\mathrm{p}}\cdot e Kp​⋅e&#xff1a;比…

挑战 ChatGPT 和 Google Bard 的防御

到目前为止&#xff0c;科学家已经创建了基于人工智能的聊天机器人&#xff0c;可以帮助内容生成。我们还看到人工智能被用来创建像 WormGPT 这样的恶意软件&#xff0c;尽管地下社区对此并不满意。但现在正在创建聊天机器人&#xff0c;可以使用生成人工智能通过即时注入活动来…

论文笔记:CellSense: Human Mobility Recovery via Cellular Network Data Enhancement

1 intro 1.1 背景 1.1.1 蜂窝计费记录&#xff08;CBR&#xff09; 人类移动性在蜂窝网络上的研究近些年得到了显著关注&#xff0c;这主要是因为手机的高渗透率和收集手机数据的边际成本低蜂窝服务提供商收集蜂窝计费记录&#xff08;CBR&#xff09;用于计费目的&#xf…