单行 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对id中含有特殊字符的转义处理示例
Sep 06 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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 cc攻击代码与防范方法
2012/10/18 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
微信小程序签到功能
2018/10/31 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
JS中this的4种绑定规则详解
2020/02/04 Javascript
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
Java程序员面试题
2016/09/27 面试题
女方婚礼新郎答谢词
2014/01/11 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
中国好声音华少广告词
2014/03/17 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
励志演讲稿600字
2014/08/21 职场文书
数学教师求职信范文
2015/03/20 职场文书