单行 JS 实现移动端金钱格式的输入规则
金钱格式检验属于很普通的需求,记得工作中第一次遇到这个需求的时候,还不太会写正则表达式,搜到了一个类似的解决方案,看着正则的文档改成了自己需要的形式。
但是用户的输入操作是任意的,只是显示提示信息,这种方式虽然可以满足要求,但是感觉不友好。
其实移动端的很多应用在输入金钱时都是屏蔽错误输入,只能输入正确的格式。先看一看金钱格式的输入规则有哪些:
1. 不能输入空白字符及字母
2. 只能输入数字及小数点
3. 首位不能为小数点
4. 小数点只能出现一次
5. 小数点后只有两位
6. 不能输入首位是 0 的多位数
看似很简单的问题,其实要考虑的很周全才可以。但是代码可以写的很简洁,我费了不少心思摸索出来的。对于校验部分确实只需要一行
function moneyFormat(str) { return str.replace(/[^\d\.]|^\./g, '').replace(/\.{2}/g, '.').replace(/^([1-9]\d*|0)(\.\d{1,2})(\.|\d{1})?$/, '$1$2').replace(/^0\d{1}/g, '0'); }
时间不早了,就写这么多吧,最后贴上我在 CodePen 写的 Demo,希望能帮到有需要的人。
See the Pen moneyFormat by Zongbin (@nzbin) on CodePen.
感谢您的阅读,如果您对我的文章感兴趣,可以关注我的博客,我是叙帝利,下篇文章再见!
开发低代码平台的必备拖拽库 https://github.com/ng-dnd/ng-dnd
低代码平台必备轻量级 GUI 库 https://github.com/acrodata/gui
适用于 Angular 的 CodeMirror 6 组件 https://github.com/acrodata/code-editor
基于 Angular Material 的中后台管理框架 https://github.com/ng-matero/ng-matero
Angular Material Extensions 扩展组件库 https://github.com/ng-matero/extensions
Unslider 轮播图插件纯 JS 实现 https://github.com/nzbin/unsliderjs
仿 Windows 照片查看器插件 https://github.com/nzbin/photoviewer
仿 Windows 照片查看器插件 jQuery 版 https://github.com/nzbin/magnify
完美替代 jQuery 的模块化 DOM 库 https://github.com/nzbin/domq
简化类名的轻量级 CSS 框架 https://github.com/nzbin/snack
与任意 UI 框架搭配使用的通用辅助类 https://github.com/nzbin/snack-helper
单元素纯 CSS 加载动画 https://github.com/nzbin/three-dots
有趣的 jQuery 卡片抽奖插件 https://github.com/nzbin/CardShow
悬疑科幻电影推荐 https://github.com/nzbin/movie-gallery
锻炼记忆力的小程序 https://github.com/nzbin/memory-stake