限制输入方案
# 限制输入方案
# 📖. 前言
在日常项目开发过程中,我们经常会用到 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