el-input输入校验插件(正则表达式)

使用方法:在main.js文件中注册插件然后直接在<el-input>加入‘v-插件名’

(1)在main.js文件:

// 只能输入数字指令
import onlyNumber from '@/directive/only-number';
Vue.use(onlyNumber);

(2)在src/directive文件夹中

(2.1)inde.js文件(这里可以修改插件名,我的是‘only-number’)
import onlyNumber from './only-number';

const install = function (Vue) {
	Vue.directive('only-number', onlyNumber);
};

if (window.Vue) {
	window['only-number'] = onlyNumber;
	Vue.use(install); // eslint-disable-line
}

onlyNumber.install = install;
export default onlyNumber;
(2.2)only-number.js文件(这里修改想象的正则表达式,匹配是否正确,不正确就要改成‘’)
export default {
	inserted: function (el, binding, vNode) {
		el.inputHandler = (e) => {
			// 只能输入数字
			if (!/^(?!0\d$)([1-9]\d?|100)$/.test(e.target.value)) {
				// 输入不符合要求,可以执行适当的操作,比如清除输入
				e.target.value = '';
			  }
		};
		el.keyupHandler = (e) => {
			// 只能输入数字
			if (!/^(?!0\d$)([1-9]\d?|100)$/.test(e.target.value)) {
				// 输入不符合要求,可以执行适当的操作,比如清除输入
				e.target.value = '';
			  }
			if (vNode.componentInstance) {
				// 如果是自定义组件就触发自定义组件的input事件
				vNode.componentInstance.$emit('input', e.target.value);
			} else {
				// 如果是原生组件就触发原生组件的input事件
				el.dispatchEvent(new Event('input'));
			}
		};
		el.addEventListener('input', el.inputHandler);
		el.addEventListener('keyup', el.keyupHandler);
	},

	// 解绑销毁事件
	unbind(el) {
		el.removeEventListener('input', el.inputHandler);
		el.removeEventListener('keyup', el.keyupHandler);
	},
};

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

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

相关文章

NOIP2023模拟12联测33 A. 构造

NOIP2023模拟12联测33 A. 构造 文章目录 NOIP2023模拟12联测33 A. 构造题目大意思路code 题目大意 构造题 思路 想一种构造方法&#xff0c;使得 y y y 能够凑成尽可能多的答案 第一行 x y r y ⋯ r xyry \cdots r xyry⋯r 第二行 r y x y ⋯ x ryxy \cdots x ryxy⋯x …

使用Anaconda安装TensorFlow环境以及没有搜到的报错的解决方法

1.在官网下载Anaconda 这一步几乎不会有人报错 下稳定的版本 或者最新的版本都可以 2.TensorFlow分两个版本 一个是用cpu跑 另一个是用gpu跑 显而易见 cpu的计算性能已经比不上现在主流的显卡了 所以有独显的电脑尽量安装gpu版本 CPU版本: 先给出cpu版本的安装方法: 打开A…

C++ PrimerPlus 复习 第九章 内存模型和名称空间

第一章 命令编译链接文件 make文件 第二章 进入c 第三章 处理数据 第四章 复合类型 &#xff08;上&#xff09; 第四章 复合类型 &#xff08;下&#xff09; 第五章 循环和关系表达式 第六章 分支语句和逻辑运算符 第七章 函数——C的编程模块&#xff08;上&#xff…

面试算法54:所有大于或等于节点的值之和

题目 给定一棵二叉搜索树&#xff0c;请将它的每个节点的值替换成树中大于或等于该节点值的所有节点值之和。假设二叉搜索树中节点的值唯一。例如&#xff0c;输入如图8.10&#xff08;a&#xff09;所示的二叉搜索树&#xff0c;由于有两个节点的值大于或等于6&#xff08;即…

第七章:计算failure概率

文章目录 第七章Random testingSerial BlocksParallel Blocks如何创建 reliability 的 Block digramsmarkov model如何根据系统来构建马尔科夫计算模型software reliability growthbasic execution time model观察 failure操作概要(operational profiles)Time理解 reliablity …

【JavaSE】基础笔记 - 类和对象(上)

目录 1、面向对象的初步认知 1.1、什么是面向对象 1.2、面向对象与面向过程 2. 类定义和使用 2.1、简单认识类 2.2、类的定义格式 2.3、自定义类举例说明 2.3.1、定义一个狗类 2.3.2、定义一个学生类 3、类的实例化 3.1、什么是实例化 3.2、类和对象的说明 1、面向…

19、Flink 的Table API 和 SQL 中的内置函数及示例(1)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

Keep-Alive中通过component多次加载同样的动态组件无法保持状态的解决办法

Keep-Alive中通过component多次加载同样的动态组件无法保持状态的解决办法 Keep-Alive中通过component多次加载同样的动态组件无法保持状态的解决办法 | 软件开发服务商 (yidianhulian.com)https://yidianhulian.com/?p12263 问题描述 项目功能上有需要动态添加组件的需求&…

H5ke9 异步处理

目录 .then()的使用详解 案例一:触小图标变大,移走变回 案例三:页面提交文件,我服务器端接收 上次fetvh就一个参数url,,就是get请求 fetch还可以第二个参数对象,可以指定method:改为POST 请求头header :发送txt,servlet,json给客户端,,异步请求图片 1都是客户端传到服务器端…

高数笔记06:无穷级数

图源&#xff1a;文心一言 时间比较紧张&#xff0c;仅导图~~&#x1f95d;&#x1f95d; 第1版&#xff1a;查资料、画导图~&#x1f9e9;&#x1f9e9; 参考资料&#xff1a;《高等数学 基础篇》武忠祥 &#x1f433;目录 &#x1f433;常数项级数 &#x1f40b;概要 &…

Python基础(第五期): python数据容器(序列) 列表 集合 元素 字符串 字典 序列遍历操作

python基础专栏 python基础&#xff08;第五期&#xff09; 文章目录 python基础&#xff08;第五期&#xff09;数据容器一、列表1、列表的定义2、列表的下标索引 3、列表的(添加)方法3.1 列表的查询方法3.2 修改特定下标索引的值3.3 列表指定位置插入元素3.3 列表指定元素的追…

Git同时配置Gitee和GitHub

Git同时配置Gitee和GitHub 一、删除原先ssh密钥二、生成密钥 这里的同时配置是针对于之前配置过单个gitee或者github而言的&#xff0c;如果需要看git从安装开始的配置&#xff0c;则可以看这一篇文章 git安装配置教程 一、删除原先ssh密钥 在C盘下用户/用户名/.ssh文件下找到…

Docker Swarm实现容器的复制均衡及动态管理:详细过程版

Swarm简介 Swarm是一套较为简单的工具&#xff0c;用以管理Docker集群&#xff0c;使得Docker集群暴露给用户时相当于一个虚拟的整体。Swarm使用标准的Docker API接口作为其前端访问入口&#xff0c;换言之&#xff0c;各种形式的Docker Client(dockerclient in go, docker_py…

Ps:PSDT 模板文件

自 Photoshop CC 2015.5 版以后&#xff0c;Ps 中新增了一种文件格式&#xff1a;.PSDT。 说明&#xff1a; PSD、PDD、PSDT 都是 Ps 的专用文件格式&#xff0c;需要继续在 Ps 中进行编辑的文件可存为此类格式。 PSD Photoshop document Photoshop 默认文档格式&#xff0c;支…

【ArcGIS模型构建器】06:ArcGIS中DOM批量分幅教程

ArcGIS中利用模型构建器实现DOM批量分幅裁剪。 文章目录 1. 加载数据2. 批量分幅1. 加载数据 批量分幅通常是基于数字正射影像来实现。 数字正射影像(DOM.tif)CASS标准图幅(shp) 2. 批量分幅 单个图幅可以通过裁剪或者按掩膜提取工具来进行,批量分幅采用模型构建器进行。…

django REST框架- Django-ninja

Django 是我学习的最早的web框架&#xff0c;大概在2014年&#xff0c;当时选他原因也很简单就是网上资料比较丰富&#xff0c;自然是遇到问题更容易找答案&#xff0c;直到 2018年真正开始拿django做项目&#xff0c;才对他有了更全面的了解。他是一个入门有门槛&#xff0c;学…

【t5 pytorch版源码学习】t5-pegasus-pytorch源码学习

0. 项目来源 中文生成式预训练模型&#xff0c;以mT5为基础架构和初始权重&#xff0c;通过类似PEGASUS的方式进行预训练。 bert4keras版&#xff1a;t5-pegasus pytorch版&#xff1a;t5-pegasus-pytorch 本次主要学习pytorch版的代码解读。 项目结构&#xff1a; train…

Python详细教程,如何使用Python进行数据可视化?

文章目录 前言一、导入必要的库二、加载数据三、创建基本图表四、添加更多细节五、使用Seaborn库创建更复杂的图表关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③…

卡尔曼家族从零解剖-(04)贝叶斯滤波→细节讨论,逻辑梳理,批量优化

讲解关于slam一系列文章汇总链接:史上最全slam从零开始&#xff0c;针对于本栏目讲解的 卡尔曼家族从零解剖 链接 :卡尔曼家族从零解剖-(00)目录最新无死角讲解&#xff1a;https://blog.csdn.net/weixin_43013761/article/details/133846882 文末正下方中心提供了本人 联系…

【C++】类与对象 上

前言 感觉自己的基础还是不够好 最近打算在学新知识的同时 把之前的一些知识点再复习一下 引入 在C语言的学习中 我们学习过结构体 我们用结构体来描述复杂的对象 在结构体中只能定义变量 而在C的结构体中 我们可以在C中 定义函数 下面给出一个简单的例子 创建一个结构体 并…
最新文章