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.hqwc.cn/news/159822.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dockerfile避坑笔记(VMWare下使用Ubuntu在Ubuntu20.04基础镜像下docker打包多个go项目)

一、docker简介 docker是一种方便跨平台迁移应用的程序&#xff0c;通过docker可以实现在同一类操作系统中&#xff0c;如Ubuntu和RedHat两个linux操作系统中&#xff0c;实现程序的跨平台部署。比如我在Ubuntu中打包了一个go项目的docker镜像&#xff08;镜像为二进制文件&am…

你知道Python、Pycharm、Anaconda 三者之间的关系吗?

哈喽~大家好呀 Python作为深度学习和人工智能学习的热门语言&#xff0c;你知道Python、Pycharm、Anaconda 三者之间的关系吗&#xff1f;学习一门语言&#xff0c;除了学会其简单的语法之外还需要对其进行运行和实现&#xff0c;才能实现和发挥其功能和作用。下面来介绍运行P…

Python基础入门例程28-NP28 密码游戏(列表)

最近的博文&#xff1a; Python基础入门例程27-NP27 朋友们的喜好&#xff08;列表&#xff09;-CSDN博客 Python基础入门例程26-NP26 牛牛的反转列表&#xff08;列表&#xff09;-CSDN博客 Python基础入门例程25-NP25 有序的列表&#xff08;列表&#xff09;-CSDN博客 目录…

鸿蒙应用开发取消标题栏

在config.json中的module下添加如下内容&#xff1a; "metaData": {"customizeData": [{"name": "hwc-theme","extra": "","value": "androidhwext:style/Theme.Emui.Light.NoTitleBar"}] }…

rhcsa-vim

命令行的三种模式 将ets下的passwd文件复制到普通用户下面 编辑模式的快捷方式 a--光标后插入 A--行尾插入 o--光标所在上一行插入 O--光标所在上一行插入 i--光标前插入 I--行首插入 s--删除光标所在位然后进行插入模式 S--删除光标所在行然后进行插入 命令模式的快捷…

【kubernetes】k8s对象☞pod

文章目录 1、什么是pod2、pod的使用2.1 用于管理pod的工作负载资源2.2 pod怎样管理多个容器2.3 pod 操作系统2.4 pod和控制器2.5 pod模板 3、pod的更新与替换3.1 资源共享和通信3.2 pod中的存储3.3 pod联网 4、容器的特权模式4.1 linux 特权容器4.2 windows特权容器 5、静态pod…

家庭用洗地机哪个最好?家用洗地机选购

家里日常打扫&#xff0c;维持地面的清洁&#xff0c;清洁干湿垃圾这时候必不可缺的就是洗地机了&#xff0c;由于近年来洗地机行业的热度高涨&#xff0c;涌现了很多洗地机品牌&#xff0c;这也让消费者在挑选的时候无从下手&#xff0c;今天笔者就给大家讲讲洗地机挑选需要主…

浅谈新能源汽车充电桩的选型与安装

叶根胜 安科瑞电气股份有限公司 上海嘉定201801 摘要&#xff1a;电动汽车的大力发展和推广是国家为应对日益突出的燃油供需矛盾和环境污染&#xff0c;加强生态环境保护和治理而开发新能源和清洁能源的措施之一&#xff0c;加快了电动汽车的发展。如今&#xff0c;电动汽车已…

tail:无法打开文件错误

错误 解决方法与原因 原因是因为之前启动的没有关闭 解决方法 1.输入ls 2.可以看到里面有start_all.sh和stop_all.sh(我们使用stop_all.sh关闭) 3.使用start_all.sh重新启动 4.我们再使用命令查看&#xff0c;可以看到没有错误了

spss chi-square test

实验卡方检验_chi-square independence-CSDN博客 VAR01类别

【优选算法系列】【专题九链表】第一节.链表常用技巧和操作总结(2. 两数相加)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、链表常用技巧和操作总结二、两数相加 2.1 题目描述 2.2 题目解析 2.2.1 算法原理 2.2.2 代码编写总结 前言 一、链表常…

uniapp原生插件之安卓TCP原生插件

插件介绍 安卓TCP插件支持自定义心跳数据&#xff0c;自定义心跳时间&#xff0c;断开连接时返回自定义数据等 插件地址 安卓TCP原生插件 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档 uniapp 安卓TCP原生插件使用文档 用法 在需要使用插件…