单行 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中常用的函数和属性详细解析
Mar 07 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
jQuery操作之效果详解
May 19 jQuery
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
php图片裁剪函数
2018/10/31 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
个人实用简单的自我评价
2013/10/19 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
消防宣传语大全
2015/07/13 职场文书