单行 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 应用类库代码
Jun 02 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
JavaScript之数组(Array)详解
2015/04/01 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
python多任务及返回值的处理方法
2019/01/22 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
工作分析计划书
2014/04/30 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
纪律教育月活动总结
2014/08/26 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
大学生党员自我评价
2015/03/04 职场文书
婚礼家长致辞
2015/07/27 职场文书
八年级数学教学反思
2016/02/17 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
常用的Python代码调试工具总结
2021/06/23 Python