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

大家好,我是大澈!

本文约1600+字,整篇阅读大约需要3分钟。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 干货速览

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

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

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

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

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

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

2. 干货详细

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

2.1 常用的正则符号

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

2.2 金额输入最常用的正则限制

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

js 复制代码
<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;
}

2.3 大小写字母 数字 下划线

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

js 复制代码
<el-input v-model="input" @input="handleInput" />

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

修改配置,有时候不能生效,重新加载后依然会有问题,所以我们直接改配置文件。

2.4 小写字母 数字 下划线

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

js 复制代码
<el-input v-model="input" @input="handleInput" />

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

2.5 数字 小数点

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

js 复制代码
<el-input v-model="input" @input="handleInput" />

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

2.6 中文

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

js 复制代码
<el-input v-model="input" @input="handleInput" />

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

2.7 排除英文标点

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

js 复制代码
<el-input v-model="input" @input="handleInput" />

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

2.8 小结

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

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

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

结语

建立这个平台的初衷:

  • 打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。
  • 遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。
  • 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

相关推荐
遂心_21 分钟前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy43 分钟前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼1 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子2 小时前
迭代器和生成器
前端·javascript
洋葱头_2 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing3 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
墨渊君4 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
源猿人5 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
最后一个农民工5 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js