input 输入框限制只能输入两位有效小数

news2025/2/25 11:37:30

前端入门即教学,今天博主分享几个前端金额实用的小案例,复制拿过去就能用哦!

   相信有很多前端小伙伴在工作中遇到过这样的需求,就是限制输入框内容只能输入两位小数吧,想了用正则但是又不知道怎么下手的同学,接下来博主分享一个小案例,下次遇到这个的时候就一点也不慌了。

    /**
         * @param row       //当前输入行
         * @param index     //当前输入字段
         * @param istype    //是否可以输入负号 例传'1'可以输入负号
                    */
            function limitedAmount(row,index,istype){
            const t = row[index].charAt(0);
            const x = row[index].charAt(1);
            if(t =='0' && x!='.' && row[index].length>1) row[index] = row[index].substr(1,row[index].length);
            row[index] =  row[index].replace(/[^\d.]/g, '');
            // 必须保证第一个为数字而不是.
            row[index] =  row[index].replace(/^\./g, '');
            // 保证只有出现一个.而没有多个.
            row[index] = row[index].replace(/\.{2,}/g, '.');
            // 保证.只出现一次,而不能出现两次以上
            row[index] =  row[index].replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
            // 保证 只允许输入两位小数
            row[index] =  row[index].replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
            // 如果你想保留4位小数把上面两位小数注释掉 用下面这句就行了
            // row[index] =  row[index].replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/,'$1$2.$3');
            if(istype !='1') return;
            // 如果第一位是负号,则允许添加
            if (t == '-') {
                row[index] = '-' +  row[index]
            }
        }

    如果只能输入0和正整数,用下面代码就可以实现:

    /**
 * 只能输入0和正整数
 * @param row    // 当前行
 * @param index  // 当前字段
 * @param type  // 是否可以输入 0 默认否
 */
function checkOnlyInputInteger(row,index,type){
  const t = row[index].charAt(0);
  if(t =='0' && !type) row[index] = row[index].substr(1,row[index].length);
  row[index] =  row[index].replace(/[^0-9]/g,'');
}

   上面是针对input 输入框对输入做的限制,下面我们对金额的保留和展示格式做一下处理,表格金额保留两位小数,如果是百分比展示百分号的处理:

/**
 * 表格金额保留两位小数
 * @param val     // 当前值
 * @param isRata  // 是否百分号展示
 */
 function setAmountFormat(val,isRata){
  if(isRata =='1') return  parseFloat(val*100).toFixed(2) +'%';
  if(val) return  parseFloat(val).toFixed(2)||'';
}

    如果有小伙伴需要把金额展示为千分位的方式去展现的可以用以下代码去实现:

  function thousand(num) {
            <!-- 千分符正则表达式 -->
            return (num + "").replace(/\d(?=(\d{3})+$)/g, "$&,")
        }
  console.log(thousand(123456789))

    金额去除千分位:

function rmoney(e) {
        if (e) {
            return parseFloat(e.replace(/[^\d\.-]/g, ''));
        } else {
            return 0;
        }
 }

​​​​​​​     好了到这里博主主要讲了一些工作中常用的金额处理方式,如果还有其他需求的小伙伴欢迎

     找博主交流探讨,快乐的时光总是短暂的,这期我们的分享就到这里了,小伙伴们动动发财

     的小手点赞加关注,这不仅是对博主的支持也是对知识的渴望!山水有相逢咋们下期见!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405568.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CSS 父选择器 :has()

精通CSS-点击快速学习 在CSS Selectors 4规范中,CSS 引入了一个名为 的新选择器:has(),它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。 父选择器如何在 CSS 中工作 在 CSS 中,如果我们想要选择某些东西,我们会使…

盘点12个前端低代码的框架开源项目以及前端低代码的总结调研,比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等

文章目录1. Appsmith2. Amis3. LowCodeEngine4. form-generator5. H5-Dooring/pc-Dooring6. YAO7. Mometa8. NocoBase9. Sparrow10. vite-vue3-lowcode11. 华炎魔方12. Awesome Lowcode参考文档低代码是基于可视化和模型驱动理念&#xff0c;结合云原生与多端体验技术&#xff…

sortablejs的使用实践

文章目录说明基本使用1. 素颜版2. 设置可被拖起的项的样式3. 设置被选中的项的样式4. 设置拖拽时跟随的阴影的样式5. 设置正在被拖拽中的样式6. 设置当前列表容器内是否可以进行拖拽排序7. 设置拖拽的手柄8. 多个列表之间的拖拽 [group]示例1 [name]示例2 [put]示例3 [put func…

【前端】图片懒加载的原理和三种实现方式

一. 图片懒加载的目的 大型网站如常用的淘宝&#xff0c;京东等页面&#xff0c;需要展示大量的商品图片信息&#xff0c;如果打开网页时让所有图片一次性加载完成&#xff0c;需要处理很多次网络请求&#xff0c;等待加载时间比较长&#xff0c;用户体验感很差。 有一种常用…

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

vite 最近非常火&#xff0c;它是 vue 作者尤大神发布前端构建工具&#xff0c;底层基于 Rollup&#xff0c;无论是启动速度还是热加载速度都非常快。vite 随 vue3 正式版一起发布&#xff0c;刚开始的时候与 vue 绑定在一起&#xff0c;但之后的 v2 版本便比较独立&#xff0c…

什么是垃圾回收机制(超详细)

垃圾回收机制 1.垃圾回收机制&#xff08;Garbage Collction&#xff09;简称GC&#xff0c;是JavaScript中使用的内存管理系统的基本组部分&#xff0c;是为了防止内存泄漏 2.JavaScript是在创建变量&#xff08;对象、字符串等&#xff09;时自动进行了分配内存&#xff0c;并…

Web实训项目--网页设计(附源码)

1 实训基本信息 1.1 实训项目名称 网页设计 1.2 实训环境 本次实训的形式以实战讲解为主&#xff0c;以项目为主导。学习如何设计网页中的轮播图和动画效果&#xff0c;并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。 2 实训内容简介 2.1 网页设计 通过…

关于vue中如何清除定时器的方法

一、问题 1、在vue中使用setTimeout定时器的时候&#xff0c;可能会遇到关不掉的情况&#xff0c;会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了&#xff0c;但是有时候没生效&#xff0c;定时器还会继续执行。 2、在这里需要说一下setTimeout的使用场景&am…

路由vue-route的使用

文章目录一、项目初始化二、路由配置规则vue-route标签作用&#xff1a;路由匹配到的组件将渲染到这里router-link标签作用&#xff1a;路由导航&#xff08;路由跳转的链接&#xff09;三、声明式导航和编程式导航声明式导航编程式导航四、路由重定向五、嵌套路由特别注意总结…

04-vscode搭建cmake的编译环境

vscodemingw搭建C/C环境系列 01.vscodemingw搭建编译调试环境 02-vscode编译调试单个源文件程序 03-vscode编译调试多个源文件程序 04-vscode搭建cmake的编译环境 文章目录一、简述二、vscode搭建cmake的编译环境&#xff08;方法1&#xff09;1.配置cmake构建目录(可忽略)…

Redux——详解

一.初识Redux 相当于vue中的vuex 1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 3.作用: 集中式管理 react 应用中多个组件共享的状态 看看Redux的工作原理图 如果要进行加一操作…

ES6---promise详解及用法

一、什么是Promise Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配&#xff08;ES8&#xff09;&#xff0c;但是它们是基于promise的)&#xff0c;从语法上讲&#xff0c;Promise是一个对象或者说是构造函数&#xff0c;用来封装异步操作并可…

炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

一&#xff1a;源码获取 这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面&#xff0c;这里我将源码资源分享给大家&#xff0c;大家可以直接免费下载使用哦&#xff0c;没有 vip 的小伙伴找我私聊发送"登录注册"即可我给你发文件&#xff0c;此登录注…

四、vue中路由router配置详解

目录 一、vue中的路由作用 二、vue中的路由router 使用步骤 三、路由跳转 1、带参数路由跳转&#xff1a; &#xff08;1&#xff09;this.$router.push() &#xff1a; &#xff08;2&#xff09;this.$router.replace() &#xff1a; 2、不带参数路由跳转 3、this.…

【手把手教安装】VUE安装教程+VScode配置!!!

含泪整理Vue安装教程 因为换了新电脑很多软件要重装&#xff0c;所以想到可以写一份教程&#xff0c;为我以后换电脑方便重装也为了大家&#xff01;&#xff01; 第一次安装Vue踩坑太多&#xff0c;这里整理一份超详细教程&#xff08;win11也可&#xff01;&#xff01;&…

uniapp 控制台警告 DevTools failed to load SourceMap: Could not load content for http://127.0.0.1问题解决

在uniapp中控制台警告&#xff0c;这是用于在开发时定位到报错的源码位置的工具SourceMap出问题了&#xff0c;如果单纯只是想消除这个警告的方法写在下面第一个&#xff0c;真正解决工具问题的方法是第二个&#xff08;需要下载一个插件&#xff09;&#xff0c;现在放在这边做…

如何修复运行缓慢的 WordPress 网站?

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 就其 SEO 而言&…

npm、nrm两种方式查看源和切换镜像

一、使用npm查看当前源、切换淘宝镜像、切换官方源 &#xff08;1&#xff09;npm查看当前源&#xff1a; npm get registry&#xff08;2&#xff09;npm设置淘宝镜像源&#xff1a; npm config set registry http://registry.npm.taobao.org&#xff08;3&#xff09;npm设…

2023 前端一场面试及答案整理

金三马上就要开始了&#xff0c;俗话说得好&#xff0c;知己知彼百战百胜&#xff0c;多准备总是没有错的。以面试的形式和大家一起学习、一起回顾我们的职场生涯。今天简单总结一下我个人去面试&#xff0c;包括我在面试别人时的经验。加油加加油&#xff01;&#xff01;&…

2022最新Nodejs下载安装配置步骤(保姆级教程)

1. 进入官网选择下载版本 http://nodejs.cn/download/2.安装过程 步骤1&#xff1a;选择next选项 步骤2&#xff1a;勾选接受协议选项&#xff0c;点击 next&#xff08;下一步&#xff09;按钮 : 步骤3&#xff1a;其默认安装目录是C:\Program Files\nodejs\&#xff0c;当…