单行 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,希望能帮到有需要的人。
See the Pen moneyFormat by Zongbin (@nzbin) on CodePen.
单行 JS 实现移动端金钱格式的输入规则的更多相关文章
- js验证输入的金钱格式
<html> <head> <title>js验证输入的金钱格式</title> <script type="text/javascri ...
- Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)
Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...
- next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序
前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...
- 用js实现web端录屏
用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- js判断移动端是否安装某款app的多种方法
本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...
- mvc 数据验证金钱格式decimal格式验证
mvc 数据验证金钱格式decimal格式验证 首先看下代码 /// <summary> /// 产品单价 /// </summary> [Display(Name = &qu ...
- JS读取client端的文件的代码片段
JS读取client端的文件内容的代码片段 if(window.FileReader){ var html5file = this.pipeDetailFileUpLoader._files[0]; ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
随机推荐
- “this kernel requires an x86-64 CPU, but only detects an i686 CPU, unable to boot” 问题解决
1. 问题描述: 在Virtual Box上安装 Ubuntu 系统时出现错误(如题),VIrtual Box 上也没有64位操作系统的选项 2.原因分析: (1) 可能 BIOS 的 Virtua ...
- java基础之类与对象3
前面我的两篇文章主要介绍了将怎么将事物抽象为对象,以及对象的实例化(就是new一个对象).这篇文章里面我就讲下匿名对象... 还是就举之前的例子把,Car c = new Car();看到这个我们就知 ...
- POJ3592 Instantaneous Transference题解
题意: 给一个矩形,矩形中某些点有一定数量的矿石,有些点为传送点,有些点为障碍.你驾驶采矿车(ore-miner truck,我也不知道是什么),从左上角出发,采尽量多的矿石,矿石不可再生.不能往左边 ...
- java 基础知识六 字符串2
java 基础知识六 字符串2 1.String类是final类,也即意味着String类不能被继承,并且它的成员方法都默认为final方法 . String 是不可变对象,也就是一旦创建,那么整 ...
- Oracle 数据导入导出操作 (转)
Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp就相当与oracle数据还原与备份. 大多情况都可以用Oracle数据导入导出完成数据的备份和还原(不会造成数据的丢 ...
- C++迭代器 iterator【转】
1. 迭代器(iterator)是一中检查容器内元素并遍历元素的数据类型.(1) 每种容器类型都定义了自己的迭代器类型,如vector:vector<int>::iterator iter ...
- iOS实现高斯模糊效果(Swift版本)
给UIimage添加分类 extension UIImage { /// 高斯模糊 func gaussianBlur(var blurAmount:CGFloat) -> UIImage { ...
- 函数求值(swust oj0274)
函数求值(0274) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 1767 Accepted: 324 Accepted 14级卓 ...
- 探讨弹性布局Flexible Box
虽然Flex布局09年就被W3C所提出,但是目前浏览器支持上还不是很好,网上找的一张图片,仅供参考: 我们先从简单讲起.如果仅仅只想实现一个栅格布局,没必要引入一个复杂的框架(如bootstrap), ...
- Java关于Robot类的使用以及远程桌面的实现
利用Robot实现效果是运行之后鼠标自动定位到整个屏幕坐标系的(635,454)位置,输入wangtianze package com.wtz.util; import java.awt.AWTExc ...