javascript

el-input 各种输入限制的正则整理

目录
  1. 1. 金额输入最常用的正则限制
  2. 2. 大小写字母 数字 下划线
  3. 3. 小写字母 数字 下划线
  4. 4. 数字 小数点
  5. 5. 中文
  6. 6. 排除英文标点
  7. 7. 小结

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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;
}

大小写字母 数字 下划线

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

1
2
3
4
5
<el-input v-model="input" @input="handleInput" />

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

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

小写字母 数字 下划线

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

1
2
3
4
5
<el-input v-model="input" @input="handleInput" />

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

数字 小数点

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

1
2
3
4
5
<el-input v-model="input" @input="handleInput" />

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

中文

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

1
2
3
4
5
<el-input v-model="input" @input="handleInput" />

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

排除英文标点

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

1
2
3
4
5
<el-input v-model="input" @input="handleInput" />

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

小结

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

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

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