单行 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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
几行js代码实现自适应
Feb 24 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 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读取RSS feed的代码
2008/08/01 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python类的用法实例浅析
2015/05/27 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server