实用干货:El-input 各种输入限制的正则整理

开发 后端
下面把最常用的几种 El-input 各种输入限制的正则,做了最简洁的整理。朋友们在使用正则时,可按分类去做参考,并按个人需求做细小改动。

1. 干货速览

对于正则表达式,不知道大家有没有这么一种感觉。就是在学的时候,感觉特别会,但到了用的时候,还得要老老实实去搜。

至于原因呢,我想了想,主要还是因为平常用的次数少。所以每当上阵用的时候,总感觉白学了。

但其实呢,在项目中真正会用到正则的情况,也就那么几种。

于是,为了后期再用到正则时,能提高效率,我把最常用的一些情况整理了下来,以备复用,特此分享给朋友们!

当然,整理的肯定不可能是万能的,最重要的还是要在此基础上,随机应变做改动。

为节约时间,正则大佬,请注意绕行哈!

2. 干货详细

先过一遍常用正则符号,再分开列举一下常用正则限制,最后做小结。

(1)常用的正则符号

开始之前,先过一遍常用的正则表达式符号:

(2)金额输入最常用的正则限制

限制input输入框只能输入数字和小数点、保留两位小数、千分位逗号分割的正则表达式。

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
input.value = onlyNumOnePoint(val);
}

const onlyNumOnePoint = (number_only) => {
// 先把非数字的都替换掉,除了数字和小数点
number_only = number_only.replace(/[^\d.]/g, "");
// 第一位0开头,0后面为数字,则过滤掉,取后面的数字
number_only = number_only.replace(/^0+(\d)/, '$1');
// 必须保证第一个为数字而不是小数点
number_only = number_only.replace(/^\./g, "");
// 保证只有出现一个小数点而没有多个小数点
number_only = number_only.replace(/\.{2,}/g, ".");
// 保证小数点只出现一次,而不能出现两次以上
number_only = number_only.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");
// 保证只能输入一个小数
// number_only = number_only.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
// 保证只能输入两个小数
number_only = number_only.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
// 千分位逗号分割 
number_only = number_only.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

return number_only;
}

(3)大小写字母 数字 下划线

限制input输入框只能输入大小写字母、数字、下划线的正则表达式。

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
input.value = val.replace(/[^\w]/g,'');
}

(4)小写字母 数字 下划线

限制input输入框只能输入小写字母、数字、下划线的正则表达式。

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
input.value = val.replace(/[^a-z0-9_]/g,'');
}

(5)数字 小数点

限制input输入框只能输入数字和小数点的正则表达式。

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
input.value = val.replace(/[^\d.]/g,'');
}

(6)中文

限制input输入框只能输入中文的正则表达式。

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
input.value = val.replace(/[^\u4e00-\u9fa5]/g,'');
}

(7)排除英文标点

限制input输入框除了英文的标点符号以外的正则表达式。

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
input.value = val.replace(/^[^!@#$%^&*()-=+]/g,'');
}

小结

在项目中真正会用到正则的情况,也就那么几种。

上面把最常用的几种 el-input 各种输入限制的正则,做了最简洁的整理。

朋友们在使用正则时,可按分类去做参考,并按个人需求做细小改动。

责任编辑:姜华 来源: 今日头条
相关推荐

2020-09-24 14:06:19

Vue

2020-12-18 09:10:36

数据库SQL Server存储空间

2024-05-28 08:23:36

Android开发文本

2010-07-05 17:10:36

FTP命令

2010-04-23 17:50:15

Oracle索引

2021-03-04 22:15:36

JavaScript编程开发

2020-07-22 13:50:39

shell命令前端

2010-02-24 17:47:05

WCF集合类型

2018-04-20 11:33:22

不平衡数据数据集模型

2021-01-28 11:29:12

Python 开发编程语言

2020-10-13 09:38:39

Python迭代开发

2014-07-07 09:39:43

2015-12-07 10:03:40

实用PHP表达式

2021-05-07 20:01:23

IO输入输出

2023-02-07 08:01:51

失焦逻辑input

2020-07-06 07:37:58

Linux虚拟

2011-03-07 09:20:02

FileZilla

2009-12-03 10:06:21

路由器功能介绍

2019-04-25 10:44:18

PHP开源库C 语言

2022-07-28 09:13:23

数仓数据
点赞
收藏

51CTO技术栈公众号