单行 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 背后的团队对外发布了一个 ...
随机推荐
- php调试之路
解析php中die(),exit(),return的区别 die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续 ...
- Android中那些有你不知道的事
在安卓开发中,总有那么一些看似简单,实则绊脚的难题,等你去探索,等你去解决,也许你已经遇见了解决了,也许你还没碰上,写下这篇总结,希望能帮助那行即将遇到的朋友,快速解决这些小问题! 一.activit ...
- Java排序算法之插入排序
基本过程: 每次将待排元素和已经排序好的序列进行比较,按照大小顺序插入进去,重新构造一个新的有序序列. 插入排序算法有种递归的思想在里面,它由N-1趟排序组成.初始时,只考虑数组下标0处的元素,只有一 ...
- [编织消息框架][JAVA核心技术]动态代理应用8-IRpcReceive实现
private static Map<Short, Map<Byte, Method>> RECEIVE_METHOD_INFO = new HashMap<>() ...
- [原创] IAR7.10安装注册教程
代码开发简单化的趋势势不可挡,TI 公司推出的 IAR7.10 以上版本,集成代码库,方便初学者进行学习移植.本教程详细列出IAR7.10安装以及注册步骤,不足之处望多多交流. 好了进入正题. 第一, ...
- 读《effective C++》1
条款一:视C++为一个语言联邦 学习C++半个月了,学了他的面向过程编程,面向对象编程(封装性,继承性,多态性),template泛型编程,开始只是觉得C++基础是面向对象,但是学了这么多块开始有点迷 ...
- C#小知识点记录(QQ交流群的一个小问题)Linq提取数据
请教 这里 LINQ想 找到 最后的 4条 记录 然后放在 这里这个 List Linq查找怎么写呀? 解答:写了一个小例子作为解答. namespace C_Sharp { class Progra ...
- 火车站点城市查询(appserv 服务器练习)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 【从无到有】教你使用animation做简单的动画效果
今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...
- 为什么大多数培训机构还停留在只教ssh框架?
最近听一些朋友说,招聘面试的很多人简历都差不多,大部分人的简历上面都写了熟悉ssh框架,我朋友就在吐槽,为什么这些人简历都差不多,并且都熟悉ssh框架? 后面他说, 可能这些人都是培训机构出来的, 然 ...