当前位置:首页 > 日记 > 正文

单行 JS 实现移动端金钱格式的输入规则

单行 JS 实现移动端金钱格式的输入规则

金钱格式检验属于很普通的需求,记得工作中第一次遇到这个需求的时候,还不太会写正则表达式,搜到了一个类似的解决方案,看着正则的文档改成了自己需要的形式。

但是用户的输入操作是任意的,只是显示提示信息,这种方式虽然可以满足要求,但是感觉不友好。

其实移动端的很多应用在输入金钱时都是屏蔽错误输入,只能输入正确的格式。先看一看金钱格式的输入规则有哪些:

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 实现移动端金钱格式的输入规则,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

老生常谈javascript中逻辑运算符&&

老生常谈javascript中逻辑运算符&&

返回值,逻辑运算符,老生常谈,电脑软件,javascript,今天在做逻辑运算符的时候遇到一个小问题一直转不过弯来,var a=(undefined&&123)||(3||5)的返回值是什么?首先是||的返回值问题:||的返回值会返回最早遇到非以下类型的值:NaN null undefined 0…

photoshop制作甜蜜的立体糖果字母

photoshop制作甜蜜的立体糖果字母

字母,甜蜜,电脑软件,photoshop,今天为大家分享photoshop制作甜蜜的立体糖果字母方法,教程很简单,适合新手来学习,推荐过来,希望大家喜欢!先让我们看看效果图步骤:1、打开软件,新建一个文件,尺寸随意,在图层上做个直线的渐变。2、点击文字按钮,按喜好…

Centos开启FTP | vsftpd服务

Centos开启FTP | vsftpd服务

服务,电脑软件,Centos,FTP,vsftpd,#chkconfig vsftpd on //开机自启动vsftpd服务#/etc/init.d/vsftpd start //开启vsftpd服务#vi /etc/vsftpd/vsftpd.conf //编辑vsftp配置文件找到下面这个并禁用:anonymous_enable=NO //禁用匿名用户登陆…

手机qq空间怎么隐藏过去动态

手机qq空间怎么隐藏过去动态

动态,空间,电脑软件,qq,  手机qq空间怎么隐藏过去动态?想要隐藏掉qq空间所有以前动态的,可以来看下文教程了解手机qq空间过去动态隐藏方法。手机qq空间怎么隐藏过去动态  1、首先在手机桌面打开【手机QQ空间】,打开以后点击屏幕右下方【…

用Vue-cli搭建的项目中引入css报错

用Vue-cli搭建的项目中引入css报错

项目,报错,原因,电脑软件,Vue,我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧!1.问题描述之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vu…

基于es6三点运算符的使用方法 | 实

基于es6三点运算符的使用方法 | 实

运算符,三点,使用方法,实例,电脑软件,先看一个es6规范下三点运算符的使用实例:let fun=function(a,...list){ console.log(a,list);};fun('0','a','b','c');//0 [a,b,c]以上可以看到我们现在在定义函数对象时可以动态设置参数的个数…

js 性能优化之算法和流程控制

js 性能优化之算法和流程控制

性能优化,流程控制,算法,电脑软件,js,循环处理是最常见的编程模式之一,也是提升性能必须关注的要点之一。常见的优化方案有:①JavaScript的四种循环(for、do-while、while、for-in)中,for-in循环比其他几种明显要慢。由于每次迭代操作会同时搜…

快速理解 JavaScript 中的 LHS 和

快速理解 JavaScript 中的 LHS 和

查询,快速,电脑软件,LHS,JavaScript,JavaScript 程序中的一段源代码在执行之前会经历三个步骤,统称为 编译分词/词法分析 解析/语法分析 代码生成先看原书对一个赋值操作的拆解说明:变量的赋值操作会执行两个动作,首先编译器会在当前作用域…

PS如何用手拿旧照片制作旧地重游的

PS如何用手拿旧照片制作旧地重游的

照片,如何用,手拿,特效,电脑软件,本教程来自P大点S的Projava!以前也有不少人做过类似的效果,就是一个人拿着一张以前拍的旧照片回到老地方寻找相同的视角,貌似很有意境。但是我找的素材不是很好。将就看看吧。最终效果:主要过程:首先我在百度找…

PHP 获取 ping 时间的实现方法

PHP 获取 ping 时间的实现方法

方法,时间,电脑软件,PHP,ping,PHP 可以通过exec函数执行shell命令,来获取ping时间。代码示例:echo 'PHP_INT_MAX : ' . PHP_INT_MAX . "<br><br>"; $ip = '115.29.237.28'; // IP地址 if (PATH_SEPARATOR==':') // linux{ echo …

bootstrap Table的一些小操作

bootstrap Table的一些小操作

操作,些小,电脑软件,bootstrap,Table,本文实例为大家分享了bootstrap Table的操作代码,供大家参考,具体内容如下function HQCreatTable(ob) { var option = { cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*…

基于构造函数的五种继承方法小结

基于构造函数的五种继承方法小结

继承,方法,构造函数,五种,电脑软件,1.使用call或apply绑定构造函数animal.apply(this.arguments)2.使用prototype属性  Cat.prototype = new Animal();  Cat.prototype.constructor = Cat;  var cat1 = new Cat("大毛","黄色");…