单行 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 相关文章推荐
JS Timing
Apr 21 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
express.js中间件说明详解
Mar 19 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
vue实现日历表格(element-ui)
Sep 24 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/09/13 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
js模拟类继承小例子
2010/07/17 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
饭店工作计划书
2014/01/10 职场文书
高一生物教学反思
2014/01/17 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
销售人员求职信
2014/07/22 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
拾金不昧表扬信
2015/01/16 职场文书
财务总监岗位职责
2015/02/03 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python