后台开发常遇到只能输入整数、x位小数，有些ui库有写好的组件，有些ui库又没有，索性封装一下
原因：
- 使用type="number"的输入框，框内会有2个小箭头，产品不想看到2个小箭头
- 项目使用的ui库输入框组件没有控制精度的字段，且数字输入框组件不符合要求
- 通过监听事件把输入值parseInt/parseFloat/toFixed，在交互上让人感觉很突兀
需求：
- 正常输入，不通过失去焦点或防抖那种改变输入的值，要在输入时就限制
- 可以输入正/负整数、正/负浮点数
- 数值精度可以自己控制
- 可已控制最大和最小输入的值
- 多位整数开头不能为0，浮点数多整数位开头不能为0，正浮点数小于1/负浮点数大于-1整数位0不能重复
- 开头不能是.号
使用：
// 使用element的input组件
<el-input @input="onInput" v-model="input" placeholder="请输入内容"></el-input>
完整版
// methods
onInput(val) {
this.input = this.handleInput(val, 2, 100, -500); // 完整版
// this.input = this.handleInput_1(val, 2, 100, 0); // 正数
// this.input = this.handleInput_1(val, 0, 100, 0); // 正数
// this.input = this.handleInput_2(val, 100, 0); // 正整数
// this.input = this.handleInput_3(val, 2, 100, 0); // 正浮点数
// this.input = this.handleInput_4(val, 0, 100, -500); // 负数
// this.input = this.handleInput_5(val, 100, -500); // 负整数
// this.input = this.handleInput_6(val, 2, 100, -500); // 负浮点数
},
handleInput(val, precision = 0, max, min) {
// 用构造函数创建，是方便使用字符模板，而\\转义符号，是因为构造函数创建正则，字符串会转义一次而正则又会转义一次
const regexp = new RegExp(`^(-)*(\\d+)\\.(\\d{0,${precision}}).*$`);
let str = String(val);
str = str.replace(/^[^-\d]/, ""); // 保证负号和数字开头
if (str.search(/^-/) > -1) { // 负数
if (precision > 0) { // 负浮点数
str = str
.replace(/[^-\d\.]/g, "") // 负浮点数只能输入3种字符： -号 .号 数字
.replace("-", "减号") // 标识第一个-号 没用正则只会匹配一个 随便怎么标识 用'傻逼'都行
.replace(/-/g, "") // 正则匹配-并删除 第一个-号被标识成了'减号'所以被保留
.replace(/减号\./, "减号") // 保证标识的-号后面是数字 如果是.号就删除
.replace(".", "点号") // 标识第一个正确输入的.号
.replace(/\./g, "") // 删除多余的.号
.replace("减号", "-") // 将标识转为正确的字符
.replace("点号", ".") // 同上
.replace(regexp, "$1$2.$3") // 完成 - 匹配正确的数字（$1、$2、$3...是使用正则组匹配，忘了去翻资料）
.replace(/^-(0+)(\d+)(\..)?/, "-$2$3") // 拓展 - 小于-1的浮点数开头不能为0
.replace(/^-(0+)(\..)?/, "-0$2"); // 拓展 - 大于-1的浮点数0不能重复
} else { // 负整数
str = str
.replace(/[^-\d]/g, "") // 负整数只能输入2种字符： -号 数字
.replace("-", "减号")
.replace(/-/g, "")
.replace(/减号\./, "减号")
.replace("减号", "-")
.replace(/^-(0+)(\d+)/, "-$2"); // 多位整数开头不能为0
}
} else { // 正数
if (precision > 0) { // 正浮点数
str = str
.replace(/[^\d\.]/g, "") // 正浮点数只能输入2种字符： .号 数字
.replace(".", "点号")
.replace(/\./g, "")
.replace("点号", ".")
.replace(regexp, "$1$2.$3")
.replace(/^(0+)(\d+)/, "$2"); // 小于1的浮点数开头0不能重复
} else { // 正整数
str = str
.replace(/[^\d]/g, "") // 正整数只能输入1种字符： 数字
.replace(/^(0+)(\d+)/, "$2"); // 多位整数开头不能为0
}
}
if (min > str || str > max) str = ""; // 控制最终结果的在传入的范围内
return str;
}
正数
handleInput_1(val, precision = 0, max, min) {
const regexp = new RegExp(`^(\\d+)\\.(\\d{0,${precision}}).*$`);
let str = String(val);
if (precision > 0) {
str = str
.replace(/^[^\d]/g, "") // 保证数字开头
.replace(/[^\d\.]/g, "")
.replace(".", "点号")
.replace(/\./g, "")
.replace("点号", ".")
.replace(regexp, "$1.$2")
.replace(/^(0+)(\d+)/, "$2");
} else {
str = str
.replace(/[^\d]/g, "")
.replace(/^(0+)(\d+)/, "$2");
}
if (min > str || str > max) str = "";
return str;
}
正整数
handleInput_2(val, max, min) {
let str = String(val);
str = str
.replace(/[^\d]/g, "")
.replace(/^(0+)(\d+)/, "$2");
if (min > str || str > max) str = "";
return str;
}
正浮点数
handleInput_3(val, precision = 2, max, min) { // 一般是保留2位
const regexp = new RegExp(`^(\\d+)\\.(\\d{0,${precision}}).*$`);
let str = String(val);
str = str
.replace(/^[^\d]/g, "")
.replace(/[^\d\.]/g, "")
.replace(".", "点号")
.replace(/\./g, "")
.replace("点号", ".")
.replace(regexp, "$1.$2")
.replace(/^(0+)(\d+)/, "$2");
if (min > str || str > max) str = "";
return str;
}
负数
handleInput_4(val, precision = 0, max, min) {
const regexp = new RegExp(`^(-)(\\d+)\\.(\\d{0,${precision}}).*$`);
let str = String(val);
str = str.replace(/^[^-]/, "");
if (precision > 0) {
str = str
.replace(/[^-\d\.]/g, "")
.replace("-", "减号")
.replace(/-/g, "")
.replace(/减号\./, "减号")
.replace(".", "点号")
.replace(/\./g, "")
.replace("减号", "-")
.replace("点号", ".")
.replace(regexp, "$1$2.$3")
.replace(/^-(0+)(\d+)(\..)?/, "-$2$3")
.replace(/^-(0+)(\..)?/, "-0$2");
} else {
str = str
.replace(/[^-\d]/g, "")
.replace("-", "减号")
.replace(/-/g, "")
.replace(/减号\./, "减号")
.replace("减号", "-")
.replace(/^-(0+)(\d+)/, "-$2");
}
if (min > str || str > max) str = "";
return str;
}
负整数
handleInput_5(val, max, min) {
let str = String(val);
str = str
.replace(/^[^-]/, "")
.replace(/[^-\d]/g, "")
.replace("-", "减号")
.replace(/-/g, "")
.replace(/减号\./, "减号")
.replace("减号", "-")
.replace(/^-(0+)(\d+)/, "-$2");
if (min > str || str > max) str = "";
return str;
}
负浮点数
handleInput_6(val, precision = 2, max, min) { // 一般是保留2位
const regexp = new RegExp(`^(-)(\\d+)\\.(\\d{0,${precision}}).*$`);
let str = String(val);
str = str
.replace(/^[^-]/, "")
.replace(/[^-\d\.]/g, "")
.replace("-", "减号")
.replace(/-/g, "")
.replace(/减号\./, "减号")
.replace(".", "点号")
.replace(/\./g, "")
.replace("减号", "-")
.replace("点号", ".")
.replace(regexp, "$1$2.$3")
.replace(/^-(0+)(\d+)(\..)?/, "-$2$3")
.replace(/^-(0+)(\..)?/, "-0$2");
if (min > str || str > max) str = "";
return str;
}
问题：
- 负数只输入-的情况
- 浮点数点可能会有xxx.的情况
网友评论