输入框限制输入内容——只能输入数字和小数点

巨蟹座守护骑士

已于 2023-12-22 17:43:43 修改

阅读量2.1k

点赞数

分类专栏： js 文章标签： vue.js javascript 前端

于 2023-08-09 14:18:53 首次发布

本文链接：https://blog.csdn.net/weixin_70563937/article/details/132186407

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

以vue的input为例，需求只能输入数字和小数点

<el-input @input="money = money.replace(/[^\d|\.]/g, '')" v-model="money" />

原理：通过绑定输入事件使用replace字符串替换方法修改绑定的值 money就是自己绑定的值

/[^\d|\.]/g 意思是全局匹配除了数字和小数点

replace(/[^\d|\.]/g, '') 就是除了数字和小数点其他都替换为空

.replace方法可以使用多个

<el-input @input="money = money.replace(/[^\d|\.]/g, '').replace(/^00/g, '0').replace(/^\./g, '0.')" v-model="money" />

除了数字和小数点其他都替换为空然后以00开头替换为0 以.开头变成0.

有其他需求根据正则表达式进行修改即可

正则表达式-CSDN博客

优惠劵

巨蟹座守护骑士

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
输入框限制输入内容——只能输入数字和小数点

【代码】输入框限制输入内容——只能输入数字和小数点。
复制链接

扫一扫

专栏目录

JS控制只能输入数字并且最多允许小数点两位

10-15

主要介绍了JS控制只能输入数字并且最多允许小数点两位,本文给大家提到js如何限制input输入框只能输入数字问题，需要的朋友可以参考下

js限制输入框只能输入数字(onkeyup触发)

10-17

主要介绍了通过js实现input输入框只能输入数字的实现方法，主要是通过正则表达式替换实现,需要的朋友可以参考下

3 条评论您还未登录，请先登录后发表或查看评论

vue只允许input框输入小数点和数字

Ivan_Jin_666的博客

06-17

9484

//vue只允许input框输入小数点和数字 oninput = “value=value.replace(/[^\d.]/g,’’)” //要设置不同的校验标准时仅修改对应的正则表达式即可 //只能输入数字、字符、字母 oninput = “value=value.replace(/[\u4E00-\u9FA5]/g,’’)” //代码中这样写合同编号 ...

Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位

一个努力不被优化的程序员

04-03

1463

要实现只能输入数字且小数点后只能是1-2位的功能，可以使用Element UI的el-input组件，并结合正则表达式和自定义校验函数来限制输入。3. 在el-input组件上添加一个自定义的校验函数，用于限制小数点后的位数。通过以上步骤，就可以实现只能输入数字并且小数点后只能是1-2位的限制。1. 在模板中使用el-input组件，并设置其type属性为"number"，以确保只能输入数字。2. 在data中定义一个inputValue的变量，用于双向数据绑定输入框的值。

vue input输入框限制输入负号、数字、以及两位小数

Sweet_Waf的博客

03-20

3004

vue input输入框限制输入数字及两位小数

vue 验证输入框只能输入整数以及只能输入整数和小数

郝峰vip的博客

11-12

1万+

前言不管什么时候做项目都会遇到验证输入框只能输入整数和小数的需求 STEP 一，输入的必须为正整数，不能输入小数点，这个参考的是element-ui的校验 v-model加.number修饰符，在检验规则里设置type为number <el-form :model="form" :rules="rules" ref="form"> <el-form-item prop="positive_integer"> <el-inp

Vue Input输入框设置只能输入数字及小数

语不惊人死不茠的博客

04-21

1万+

<div class="form-group"> <label for="basic">资产价值(万元)</label> <input type="number" step="0.1" id="basic" v-model.number="assetMessage.value" class="form-control"...

只能输入数字和小数点的js

05-22

只能输入数字或者字母或者小数点的js方法

vue input框只能输入数字、小数点并限制长度

chuxuezhe__1的博客

09-15

1万+

今天在写代码时遇到一些问题，input的type属性值为number时，maxlength的设置会失效，type属性值为text时，又无法满足input只能输入数字的限制，找到的解决方法如下： <form v-for="(item,index) in list" :key='item.id'> <input type="text" placeholder="请输入数量" v-model="item.num" maxlength="7" @keyup="item.nu

vue中的el-input中只允许输入数字与小数点

骨子里的偏爱

04-17

2326

【代码】vue中的el-input中只允许输入数字与小数点。

vue 文本输入框只允许输入字母、数字、不允许输入特殊字符

热门推荐

^_^

08-31

2万+

一、基本结构 <input type="text" v-model="note" maxlength="18"> <script> export default { data () { return { note: '', } } } </script> 二、监听表单输入的内容 watch: { // 只允许输入字母 note (newValue, oldValue) { console.l..

关于vue的element的输入框el-input限输入只能是数字，包含小数，正数，自然数等等。

qq_32154641的博客

01-17

9993

关于element的输入框el-input限输入只能是数字，就是包括数字123456,小数的只能一个小数点，不能出现多个小数点，小数可以0开头，但是整数不能0开头，不能输入文字，不能输入负数，所以对于这个我做了两个判断，一个是正则判断，还有一个是0开头的整数判断，正则判断是只能输入数字，只能输入一个小数点，不能输入负数，整数判断是input输入失去焦点的时候，如果是小数0.开头的不管，但是如果不是0.开头的就要把第一个数字0去掉。

限制html文本框input只能输入数字和小数点

09-28

本文主要介绍了限制html文本框input只能输入数字和小数点的方法。具有很好的参考价值。下面跟着小编一起来看下吧

JS验证只能输入小数点,数字,负数的实现方法

10-21

下面小编就为大家带来一篇JS验证只能输入小数点,数字,负数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

js控制文本框只输入数字和小数点的方法

12-11

本文实例讲述了js控制文本框只输入数字和小数点的方法。分享给大家供大家参考。具体实现方法如下：代码如下:function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, “”);//清除“数字”和“.”...

三、VUE数据代理

D_A_I_H_A_O的博客

04-29

574

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）

前端Vue 后端FastApi 跨域 CORS

weixin_44656422的博客

05-06

162

前端是localhost:3000,后端是localhost:8000 ，就是跨域了。

vue 快速入门系列 —— 玩转 CMS

ZL4120505的博客

04-29

808

例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。

vue中的async

最新发布

三三木木七的博客

05-06

197

在使用 async 关键字声明的函数内部，可以使用 await 关键字来等待一个 Promise 对象解析。这样可以使代码更加清晰和易于理解，因为它们使异步代码看起来更像同步代码，避免了回调地狱。

elul输入框只能输入数字和小数点

11-22

可以使用JavaScript来实现elul输入框只能输入数字和小数点的功能，具体实现方法如下所示： ```javascript // 获取elul输入框元素 var elulInput = document.getElementById("elul-input"); // 给elul输入框绑定onkeydown事件 elulInput.onkeydown = function(event) { // 获取当前按下的键的keyCode var keyCode = event.keyCode; // 允许数字键、小数点键、删除键、退格键以及左右方向键 if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) || keyCode == 190 || keyCode == 110 || keyCode == 8 || keyCode == 46 || keyCode == 37 || keyCode == 39) { return true; } else { return false; } }; // 给elul输入框绑定onkeyup事件 elulInput.onkeyup = function(event) { // 获取elul输入框的值 var value = elulInput.value; // 将非数字和小数点的字符替换为空字符串 value = value.replace(/[^\d\.]/g, ""); // 将多余的小数点替换为空字符串 value = value.replace(/\.{2,}/g, "."); // 将小数点前面的多余的0去掉 value = value.replace(/^0+(\d+)/g, "$1"); // 将小数点后面的多余的0去掉 value = value.replace(/(\.\d+?)0+$/g, "$1"); // 将elul输入框的值设置为处理后的值 elulInput.value = value; }; ``` 在上述代码中，我们首先获取了elul输入框的元素，然后给它绑定了onkeydown和onkeyup事件。在onkeydown事件中，我们判断了当前按下的键是否是数字键、小数点键、删除键、退格键以及左右方向键，如果是则返回true，否则返回false，这样就可以限制elul输入框只能输入数字和小数点了。在onkeyup事件中，我们获取了elul输入框的值，然后使用正则表达式将非数字和小数点的字符替换为空字符串，将多余的小数点替换为空字符串，将小数点前面的多余的0去掉，将小数点后面的多余的0去掉，最后将elul输入框的值设置为处理后的值，这样就可以保证elul输入框中的数字和小数点的格式是正确的。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交