单行 JS 实现移动端金钱格式的输入规则


Posted in Javascript onMay 22, 2017

金钱格式检验属于很普通的需求,记得工作中第一次遇到这个需求的时候,还不太会写正则表达式,搜到了一个类似的解决方案,看着正则的文档改成了自己需要的形式。

但是用户的输入操作是任意的,只是显示提示信息,这种方式虽然可以满足要求,但是感觉不友好。

其实移动端的很多应用在输入金钱时都是屏蔽错误输入,只能输入正确的格式。先看一看金钱格式的输入规则有哪些:

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,希望能帮到有需要的人。

单行 JS 实现移动端金钱格式的输入规则

以上所述是小编给大家介绍的单行 JS 实现移动端金钱格式的输入规则,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
jQuery拖拽 & 弹出层 介绍与示例
Dec 27 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
深入学习JavaScript对象
Oct 13 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
JavaScript表单验证实现代码
May 22 #Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
原生JS实现N级菜单的代码
May 21 #Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 #Javascript
详解Angular2中Input和Output用法及示例
May 21 #Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 #Javascript
详解angularjs利用ui-route异步加载组件
May 21 #Javascript
You might like
php短域名转换为实际域名函数
2011/01/17 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
Python多线程实例教程
2014/09/06 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python3 翻转二叉树的实现
2019/09/30 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
世界上最大的二手相机店:KEN
2017/05/17 全球购物
建筑专业自荐信范文
2014/01/05 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
高中生家长寄语大全
2014/04/03 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
长城导游词400字
2015/01/30 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书