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

Jf228资讯网——每日最新资讯28at.com

1. 干货速览

对于正则表达式，不知道大家有没有这么一种感觉。就是在学的时候，感觉特别会，但到了用的时候，还得要老老实实去搜。Jf228资讯网——每日最新资讯28at.com

至于原因呢，我想了想，主要还是因为平常用的次数少。所以每当上阵用的时候，总感觉白学了。Jf228资讯网——每日最新资讯28at.com

但其实呢，在项目中真正会用到正则的情况，也就那么几种。Jf228资讯网——每日最新资讯28at.com

于是，为了后期再用到正则时，能提高效率，我把最常用的一些情况整理了下来，以备复用，特此分享给朋友们！Jf228资讯网——每日最新资讯28at.com

当然，整理的肯定不可能是万能的，最重要的还是要在此基础上，随机应变做改动。Jf228资讯网——每日最新资讯28at.com

为节约时间，正则大佬，请注意绕行哈！Jf228资讯网——每日最新资讯28at.com

Jf228资讯网——每日最新资讯28at.com

2. 干货详细

先过一遍常用正则符号，再分开列举一下常用正则限制，最后做小结。Jf228资讯网——每日最新资讯28at.com

（1）常用的正则符号

开始之前，先过一遍常用的正则表达式符号：Jf228资讯网——每日最新资讯28at.com

Jf228资讯网——每日最新资讯28at.com

（2）金额输入最常用的正则限制

限制input输入框只能输入数字和小数点、保留两位小数、千分位逗号分割的正则表达式。Jf228资讯网——每日最新资讯28at.com

<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输入框只能输入大小写字母、数字、下划线的正则表达式。Jf228资讯网——每日最新资讯28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = val.replace(/[^/w]/g,'');}

（4）小写字母 数字 下划线

限制input输入框只能输入小写字母、数字、下划线的正则表达式。Jf228资讯网——每日最新资讯28at.com

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

（5）数字 小数点

限制input输入框只能输入数字和小数点的正则表达式。Jf228资讯网——每日最新资讯28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = val.replace(/[^/d.]/g,'');}

（6）中文

限制input输入框只能输入中文的正则表达式。Jf228资讯网——每日最新资讯28at.com

<el-input v-model="input" @input="handleInput" />const handleInput = (val) => {input.value = val.replace(/[^/u4e00-/u9fa5]/g,'');}

（7）排除英文标点

限制input输入框除了英文的标点符号以外的正则表达式。Jf228资讯网——每日最新资讯28at.com

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

小结

在项目中真正会用到正则的情况，也就那么几种。Jf228资讯网——每日最新资讯28at.com

上面把最常用的几种 el-input 各种输入限制的正则，做了最简洁的整理。Jf228资讯网——每日最新资讯28at.com

朋友们在使用正则时，可按分类去做参考，并按个人需求做细小改动。Jf228资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-79299-0.html实用干货：El-input 各种输入限制的正则整理

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Tailwind CSS，值得2024年的你一试吗？

下一篇： 我们一起聊聊什么是正向代理和反向代理