限制输入方案
# 限制输入方案
# 📖. 前言
在日常项目开发过程中，我们经常会用到 ElementUI 这个组件库，其中的 el-input 组件很好用，但是没有对数字的进行限制的功能，特别是有的项目中需要限制只能填写数字，不能为负数，不能有多个小数点，小数位多少，整数位多少等等。
这些需求下，组件默认的功能就很难满足了，需要专门写代码来控制。
为了减少开发成本，提高工作效率，我整理了如下2种方法，大家可以根据实际情况使用，以下方法仍旧适用普通 input 标签。
# 一. 方法一
使用行内正则控制。
oninput ="value=value.replace(/[^\d]/g, '')" // 只能输入数字(正整数)
oninput ="value=value.replace(/[^\-\d]/g, '')" // 只能输入数字（包含正负数）
oninput ="value=value.replace(/[^\-\d.]/g, '')" // 只能输入数字和小数
oninput ="value=value.replace(/[^\d.]/g, '').replace(/^(\d+)\.(\d\d).*$/, '$1.$2')" // 只能输入数字和小数，只保留一个小数点
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d+).*$/, '$1$2.$3')" // 只能输入数字和小数，只保留一个小数点(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')" // 只能输入数字和小数，只保留一个小数点，只保留2位小数(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d${3}).*$/, '$1$2.$3')" // 只能输入数字和小数，只保留一个小数点，只保留3位小数(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/(\.)(\d*)(\1*)/g,'$1$2').replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1.$2')" // 【终极】只能输入数字和小数，只保留一个小数点，只保留3位小数(包含负数)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
使用示例：
<template>
<el-form-item label="角色Id">
<el-input type="text" size="small" width="50" v-model="param.roleId" placeholder="请输入数字" oninput="value=value.replace(/[^\d]/g,'')">
</el-form-item>
<el-input v-model="money" oninput ="value=value.replace(/[^\d.]/g,'')">
<span slot="suffix">/ 元 </span>
</el-input>
</template>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 二. 方法二（推荐👉）
使用封装的通用方法进行更细粒度的统一控制，可单独控制整数位和小数位个数。
主要做了如下限制：
- 限制只能填写数字类型；
- 限制整数和小数位数；
- 限制只有一个小数点；
- 限制不能以小数点开头；
- 限制整数不出现00的情况；
通用方法 CheckNum 源码：
！！这里挂载到window对象上，为了后面方便使用，记得及时清理不用的全局变量，可以在 beforeDestory 生命周期中直接把变量赋值为 null 来清除引用。
/**
* @Description: 用于限制 input 输入的数字位数（包含小数位）
* @param { Any } obj → 当前 DOM this
* @param { Number } intNum → 表示整数位个数， 默认 0 为不限制
* @param { Number } decNum → 表示小数位个数，默认 0 为没小数
* @param { Boolean } NegNum → 是否可以输入负数, 默认 false 不可输入负数
*/
window.checkNum = function(obj, intNum = 0, decNum = 0, NegNum = false) {
let value = obj.value;
let changeValue;
let t1;
let t2;
switch (decNum) {
case 0:
value = NegNum ? value.replace(/[^\-\d]/g, '') : value.replace(/[^\d]/g, ''); // 去除数字以外的字符，若要支持负数，可将此处正则改为/[^\-\d]/g
value = value.replace(/^0\d+/g, '0'); // 防止整数位出现 00 的情况
value = (value.length > 1) ? value.charAt(0) + value.substr(1).replace(/[^\d.]/g, '') : value; // 确保最多只能有一个负号
if (intNum !== 0) {
value = value.substr(0, intNum);
}
break;
default:
// 去除数字和小数点以外的字符，若要支持负数，可将此处正则改为/[^\-\d.]/g
value = NegNum ? value.replace(/[^\-\d.]/g, '') : value.replace(/[^\d.]/g, '');
// 保证第一个字符是数字，若要支持负数，可将此处正则改为/^[^\-\d]/g
value = NegNum ? value.replace(/^[^\-\d]/g, '') : value.replace(/^[^\d]/g, '');
// 确保最多只能有一个负号
value = (value.length > 1) ? value.charAt(0) + value.substr(1).replace(/[^\d.]/g, '') : value;
// 防止整数位出现'00'的情况
if (value.length > 2 && value.charAt(0) === '-' && value.charAt(1) === '0' && value.charAt(2) !== '.') {
value = `-${value.substr(2)}`;
}
// 去除第二个小数点
value = value.replace(/\.{2}/g, '.');
value = value.replace(/^0\d+/g, '0');
changeValue = value.split('.');
if (changeValue.length > 1) { // 表示用户输入的既有整数又有小数
if (intNum === 0) {
t1 = changeValue[0];
} else {
t1 = changeValue[0].substr(0, intNum);
}
t2 = changeValue[1].substr(0, decNum);
value = t1 + '.' + t2;
} else {
if (intNum !== 0) {
value = value.substr(0, intNum);
}
}
break;
}
if (obj.value !== value) {
obj.value = value;
}
return value;
}
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
使用示例：
<template>
<el-form-item label="角色Id">
<el-input type="text" size="small" width="50" v-model="param.roleId" placeholder="请输入数字" oninput="checkNum(this, 4, 1)">
</el-form-item>
</template>
1
2
3
4
5
2
3
4
5
记得及时清除引用
beforeDestroy() {
window.checkNum = null;
}
1
2
3
2
3
# 📖. 参考
上次更新: 2022/07/08, 17:40:08