单行 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高亮效果的二种实现方法
Sep 14 Javascript
js实现简单模态窗口,背景灰显
Nov 14 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
神族 PROTOSS 概述
2020/03/14 星际争霸
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
javascript 闭包详解
2015/07/02 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python数据结构之翻转链表
2017/02/25 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python使用Matlab命令过程解析
2020/06/04 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
python 装饰器的基本使用
2021/01/13 Python
C语言编程练习
2012/04/02 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
初中地理教学反思
2014/01/11 职场文书
大学毕业感言200字
2014/03/09 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
假面舞会策划方案
2014/05/29 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
副总经理岗位职责
2015/02/02 职场文书
辩论赛主持人开场白
2015/05/29 职场文书