单行 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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
vue组件开发之slider组件使用详解
Aug 21 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
原生JS实现飞机大战小游戏
Jun 09 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 删除记录实现代码
2009/03/12 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP面向对象详解(三)
2015/12/07 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
javascript new后的constructor属性
2010/08/05 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
吨的认识教学反思
2014/04/27 职场文书
单位消防安全责任书
2014/07/23 职场文书
我的中国心演讲稿
2014/09/04 职场文书
小学运动会开幕词
2015/01/28 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
律师函格式范本
2015/05/27 职场文书
安全教育观后感
2015/06/17 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers