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

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

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

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,希望能帮到有需要的人。

See the Pen moneyFormat by Zongbin (@nzbin) on CodePen.

单行 JS 实现移动端金钱格式的输入规则的更多相关文章

  1. js验证输入的金钱格式

    <html> <head> <title>js验证输入的金钱格式</title> <script type="text/javascri ...

  2. Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)

    Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...

  3. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...

  4. 用js实现web端录屏

    用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...

  5. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  6. js判断移动端是否安装某款app的多种方法

    本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...

  7. mvc 数据验证金钱格式decimal格式验证

    mvc 数据验证金钱格式decimal格式验证 首先看下代码 /// <summary> /// 产品单价 /// </summary> [Display(Name = &qu ...

  8. JS读取client端的文件的代码片段

    JS读取client端的文件内容的代码片段 if(window.FileReader){ var html5file = this.pipeDetailFileUpLoader._files[0]; ...

  9. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

随机推荐

  1. [SinGuLaRiTy] 2017-03-27 综合性测试

    [SinGuLaRiTy-1013] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 这是 三道 USACO 的题...... 第一题:奶牛飞 ...

  2. 用Xamarin + VS 编写Android程序体验及其与Android Studio的比较

    昨天看了微软2016Build大会,Xamarin免费了.恩,5亿美刀的家伙,哈哈,我也要体验一下..... 1. 首先在Xamarin官网下载安向导:https://www.xamarin.com/ ...

  3. EM最大期望算法-走读

    打算抽时间走读一些算法,尽量通俗的记录下面,希望帮助需要的同学.   overview: 基本思想:      通过初始化参数P1,P2,推断出隐变量Z的概率分布(E步):      通过隐变量Z的概 ...

  4. C++ fstream 详解

    最近在写哈夫曼压缩,遇到了一个比较让人头疼的问题,那就是对文件的读写操作,尤其是以二进制的形式来读写,无奈C++Primer第五版上写的并不详细,很多让人困惑的地方没有涉及或者没有讲清楚.于是这几天我 ...

  5. Linux 安装SVN服务器 (转)

    一. SVN 简介 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository) 中 ...

  6. folly教程系列之:future/promise

         attension:本文严禁转载. 一.前言 promise/future是一个非常重要的异步编程模型,它可以让我们摆脱传统的回调陷阱,从而使用更加优雅.清晰的方式进行异步编程.c++11中 ...

  7. 使用NPOI生成Excel级联列表

    目录 1    概要    1 2    磨刀不误砍柴工——先学会Excel中的操作    2 3    利用NPOI生成导入模板    7 3.1    设置workbook&sheet   ...

  8. Spring+IOC(DI)+AOP概念及优缺点

    Spring pring是一个轻量级的DI和AOP容器框架. 说它轻量级有一大部分原因是相对与EJB的(虽然本人从没有接触过EJB的应用),重要的是,Spring是非侵入式的,基于spring开发的应 ...

  9. 卷积神经网络CNN与深度学习常用框架的介绍与使用

    一.神经网络为什么比传统的分类器好 1.传统的分类器有 LR(逻辑斯特回归) 或者 linear SVM ,多用来做线性分割,假如所有的样本可以看做一个个点,如下图,有蓝色的点和绿色的点,传统的分类器 ...

  10. clamav 杀毒软件安装及使用配置

    安装clamav 之前还需要安装zlib 要不然安装过程中会报错的. tar -zxvf  zlib-1.2.3.tar.gz cd zlib-1.2.3 ./configure make make ...