金额输入框校验和自动校正、支持指定任意位数小数decimal、支持只能输入整数、支持是否允许输入负数等功能

应用场景：开发前端交互页面时，经常遇到金额输入框、指定小数位数的数字输入框，单一的正则表达式无法满足大部分的业务校验需求，下面总结一个实用巧妙而又灵活的把普通输入框变成自动校正输入框的解决方案：

数字（金额）输入框：

输入金额：<input id="money">

原生JS自动校正：

let dom = document.getElementById("money");
dom.addEventListener("input", function () {console.log(this.value);let inputValue = this.value;this.value = autoFixedDicimal(this.value, 3, true); // 示例：最多允许3位小数，可以为负数console.log(`\t\t输入：【${inputValue}】=>【${this.value}】=>转化为Number类型：【${Number(this.value)}】`);
});

/*** 自动校正数字输入框* @param inputValue 输入值* @param bitsAfterDot 小数点后最多允许的位数，默认2位* @param allowNegative 是否允许输入负数，默认否*/
function autoFixedDicimal(inputValue, bitsAfterDot, allowNegative) {// 处理参数的默认值if (bitsAfterDot == null || bitsAfterDot == undefined)bitsAfterDot = 2;allowNegative = allowNegative || false;// 自动校正输入的数字decimallet value = inputValue;// 先处理符号问题（负数）let mark = "";if (/^-/.test(value)) {mark = "-";}// 如果输入非数字，则替换为''value = value.replace(/[^\d\.]/g, '');// 必须保证开头为数字而不是小数点.value = value.replace(/^\./g, '');// 保证小数点.最多出现一次value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');// 只能输入两位小数let reg = new RegExp(`^(\\-)*(\\d+)\\.([\\d]{0,${bitsAfterDot}}).*$`);value = value.replace(reg, '$1$2.$3');value = allowNegative ? mark + value : value;return value;
}

测试结果：

注意事项：

1.输入框的"input"事件主流浏览器都支持，IE的兼容性未测，如果不支持，可增加绑定"propertychange"事件。强大之处在于：输入框的值改变（键盘、鼠标、粘贴）都能检测到；

2.对于校正后的结果，最好使用Number(value)转化成Number类型，避免用户输入了小数点但小数点后面没有小数部分（截图）；

3.如果你不想使用自动校正的功能，这里提供一个比较友好的校验可能包含有小数的正则表达式：/(^[1-9][0-9]*$|^0$)|((^[1-9][0-9]*|^0)[\.](\d)*$)/ 在光标移开事件blur或者提交前校验输入的数字是否合法。

最后小记一下：

之前在实际项目中自己也是花了很多时间写过类似的自动校验方法，比较复杂，文末会给出TypeScript版。上面的自动校验参考的是这篇博客自动校验，吸取别人的优点，也扩展了其功能。

以前自己写的TypeScript版：

/*** 金额自动校正* @param value 字符串类型* @param maxLengthAfterDot 小数点后最多允许多少位* @return 过滤后的字符串*/public static filterMoney(value, maxLengthAfterDot): string {// 先遍历去掉非数字非小数点.的字符let filtered = "";for (let c of value) {if ("0123456789.".includes(c)) {filtered += c;}}// 如果有多个小数点.，则去掉后面多余的小数点.let locationOfDot = filtered.indexOf(".");if (locationOfDot > -1) {filtered = filtered.replace(/\./g, "");filtered = filtered.slice(0, locationOfDot) + "." + filtered.slice(locationOfDot)}// 再用正则去校验let re = /(^[1-9][0-9]*$|^0$)|((^[1-9][0-9]*|^0)[\.](\d)*$)/if (!re.test(filtered)) {// console.error("输入金额不合法：", value);filtered = filtered.slice(0, -1);}// 小数点后最多maxLengthAfterDot位let re2 = /[\d]+\.(\d*)$/g;let execArray = re2.exec(filtered);if (execArray && execArray.length > 0 && execArray[1].length > maxLengthAfterDot) {// console.error(`小数点后面长度超过了${maxLength}位`);filtered = filtered.slice(0, -1);}return filtered;}

金额输入框校验和自动校正、支持指定任意位数小数decimal、支持只能输入整数、支持是否允许输入负数等功能相关推荐

matlab 小数位,MATLAB 任意位数小数控制
MATLAB 任意位数小数控制今天收到一个求助,说是要控制小数至任意小数位,并要将结果转成字符型.个人知道,matlab的小数位控制较为单一,基本上靠format来完成.但matlab中,仅有默认的 ...
C语言输出任意位数小数
输出函数:printf(); 1.保留n位小数 printf("%.nlf",a); //保留n位小数此外,还可以写做 printf("%.*f",n,a); ...
Java四舍五入保留任意位数小数
public double persist(double num, int x) {num *= Math.pow(10, x + 1);// 10的x+1次方:x表示所要最终要保留的位数// 强制转 ...
【Excel】添加自动填充时指定的内容
[Excel]添加自动填充时指定的内容操作: 文件 – 选项 – 高级 – 常规 – 编辑自定义列表 – 输入序列 – 添加 – 确定 – 确定例子: 比如需要输入:周一,周二,周三,周四,周五, ...
html金额输入框转大写,纯CSS实现输入框字符自动转为小写或大写
对于输入框的字符,如果要求只能输入小写或大写,怎么处理?js实现?提交到后台程序转换?其实很简单,CSS就有这个功能,一条语句就搞定. 纯CSS实现输入框字符自动转为小写或大写 CSS .lowerc ...
如何从数据库中筛选出达成指定里程碑节点的项目_公测首发 | 支持API的连接型智能多维表格，「vika维格表」如何让数字化真正成为生产力？...
△ 是新朋友吗?记得先点上面关注我哦~ 维格星球 http://vika.cn 市面上的软件工具那么多,但却很少可以做好连接和整合,真正帮助我们更好地工作和生活. 毕竟,对于使用软件提升「生产力」, ...
清华大学发布首个自动图机器学习工具包 AutoGL，开源易用可扩展，支持自定义模型...
来源:机器之心本文约2800字,建议阅读6分钟如何应用自动机器学习 (AutoML) 加速图机器学习任务的处理? 清华大学发布全球首个开源自动图学习工具包:AutoGL (Auto Graph Lea ...
Python自动覆盖录屏软件——NIRE工作室开源软件（参数自动校正）（欢迎白嫖）
复调录屏软件版本号:0.1.1 Alpha 发行时间:2021年02月11日发布方:NIRE工作室开发者:Nire_Yeyu 一.软件描述目标群体:软件开发工程师.测试工程师.工程实施人员.软 ...
穿越火线 raquo; 自动准备挂机刷分器V3.4 6月18号（支持永久跟新）
6月18号更新说明完美修复成为房主时.不能自动退出房间... 完美修复准备时间太长.不会自动退出房间... 过TX检测.... 修复自动按F5的问题.设置成可以选择开关.. 修复成为房主时.会自动退 ...

金额输入框校验和自动校正、支持指定任意位数小数decimal、支持只能输入整数、支持是否允许输入负数等功能

金额输入框校验和自动校正、支持指定任意位数小数decimal、支持只能输入整数、支持是否允许输入负数等功能相关推荐

最新文章

热门文章