vue 输入框 限制输入 小数

最新推荐文章于 2023-11-09 15:42:16 发布
最新推荐文章于 2023-11-09 15:42:16 发布
阅读量254 收藏 2
点赞数 1
分类专栏： 正则 文章标签： javascript vue 正则表达式 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27088279/article/details/112785420
版权

基于vue+elementUI,闲话少叙直接上代码

<el-input v-model="xxxId" placeholder="编号" clearable 
@input="xxxId=(xxxId.match(/^\d+(\.?\d{0,2})/g) || '')[0] || ''" />

以数字开头 (^\d+)
.? (零次或一次 . )
\d{0,2} (后缀零位或两位数字 . )
第一个 || 避免出现null[0]情况
第二个 || 避免值为undefined

估计还有改进的空间或更好的方案,但暂时想不到了





参考文章: https://blog.csdn.net/whiteyjw/article/details/107107295

归山半海
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue如何限制只能输入正负数及小数
10-16
主要介绍了vue如何限制只能输入正负数及小数,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue项目 - 自定义数字输入指令 | 限制自定义小数位输入
weixin_43839317的博客
12-02 1052
最近在开发中，有这样的需求，比如：一个输入框，只允许输入正整数、或者两位小数，如果每个都加限制的话就很浪费时间，后来查找资料找出了一个一劳永逸的解决方案，就是加一个自定义指令，就与v-model一样，定义好之后，直接使用就可以了！ 1、在main.js中直接加入代码： import Vue from 'vue' Vue.directive("input-limit", { bind(el, binding) { var wins_0 = /[^\d]/g //整数判断 var wi.
Vue input输入限制—正整数，小数位数……
Dhun_LI的博客
12-25 1万+
最近一个需求，因为数据比较多，提测时各种输入框限制的bug反馈回来，快要气死了，把我遇到的做个总结，以后再遇到也能参考一下…… 1、仅能输入正整数 在input里加入onkeyup那一行代码即可，这样无论怎么输入汉字字母还是符号什么的都输入不进去，哪怕是数字，单输入0或者0.xxxx也一样输入不进去，只有输入正整数才可以。（公司电脑上没有软件不然就录屏转GIF放出来了，可以参考） 小bug：当长按0的时候可以输入一堆0，违背了正整数，目前还没有找到非常完美的写法，请大家补充。 <el-inp
VUE中实现输入框禁止输入小数
yangli_的博客
11-09 1419
VUE中实现输入框禁止输入小数
Vue 限制input输入数字 不可小数
Yujis的博客
04-16 1808
1.Vue 限制input输入数字 不可小数 <el-input class="input-sort" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="请输入" v-model.trim="scope.row.amount" clearable></el-input>
Vue中实现输入框Input输入限制
xqhys的博客
07-04 9712
输入框Input输入限制
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
input输入框中禁止输入小数和负数（*只允许输入正整数 *） 最近在做项目中碰见了这么个问题，需要输入数字，但是只能输入正整数，在网上找的没找到自己想要的，所以就自己想了两个办法，在这里跟大家分享一下。...
vue限制输入框只能输入8位整数和2位小数的代码
10-16
主要介绍了vue限制输入框只能输入8位整数和2位小数，文中我们使用v-model加watch 实现这一个功能,代码简单易懂，需要的朋友可以参考下
vue input 只允许输入整数、整数和小数（保留小数点后两位）
qiaoguoqing的专栏
08-06 4370
###input只允许输入整数和小数（小数只保留小数点后两位） <el-inputsize="small" onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/)" onafterpaste="this.value=this.value.match(/\d+\.?\d{0,2}/)" v-model="scope.row.agentPrice" maxlength="9"></el-input> ###i...
input输入框限制数字类型输入
cpc980209的博客
10-11 1717
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。但是存在bug：使用。
使用v-model.number遇到的问题（小数点后边无法输入0）
逆水行舟 不进则退
01-31 6564
用户在数字输入框中无法输入0.04，测试发现小数点后边只要带0都输入不上
vue input输入框限制输入负号、数字、以及两位小数
Sweet_Waf的博客
03-20 2987
vue input输入框限制输入数字及两位小数
Vue+＜el-input＞限制输入小数点后两位
最新发布
从容日月长
11-09 2948
Element UI组件绝大时候可以满足我们VUE项目实操中的需求，但总会有意想不到的功能需求需要我们去进行处理，所以记录<el-input>如何限制小数点后两位功能。这样就完成了上述功能需求，编写不易，还望大家支持！需要注意的如下声明：参数value表示输入的值name表示匹配的对象属性；this.form[name]表示绑定的表单form及input框绑定的属性值。
Vue input 限制输入正负数，小数点后保留两位
林中明月间丶
09-10 8162
https://www.jianshu.com/p/da9696b83ddb
js(vue)输入框只能输入数字且保留（1/2/3..）多位小数的正则表达式
miem_yang的博客
06-20 1754
【代码】js(vue)输入框只能输入数字且保留（1/2/3..）多位小数的正则表达式。
【VUE禁止输入框输入小数点】
qq_44712196的博客
09-22 580
VUE禁止输入框输入小数点两种方案，亲测有效
vue只能输入俩位小数 和数字的正则
木贝西的博客
04-04 2275
1 表示正则表达式中第一个括号内的匹配内容，也就是第一个小数点之前的模式，保留小数点后的 0 到 2 位数字。需要注意的是，在这段代码中使用的正则表达式 /[^0-9]/g 和 /\D/g 是等价的。其中，正则表达式 /[^0-9]/g 中的方括号表示一个字符集，匹配方括号中除 0-9 以外的所有字符；整个正则表达式的含义是，匹配一个或多个数字字符，后面可能跟有一个小数部分，小数部分由一个小数点和一到两个数字字符组成。因此，建议在前端和后端都对用户输入进行有效性校验，确保输入的是有效的数字。
vue限制输入框禁止输入小数点
weixin_45966674的博客
10-13 2375
我们这里onkeyup用的this 是输入框本身 value 是真的输入框的value 所以 你不用担心输入框v-model 上绑定了什么。type="number"能阻止用户输入字符等但还是防止不了小数点 因为小数点在数字类型的输入中是合理的。这样就能很好的规避 用户输入小数点 而且就一行代码 直接有效。我们可以在onkeyup中做一些手脚。有一些需求会要求我们只能输入正整数。
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输入框只能输入整数
07-15
实现Vue输入框只能输入整数的方法有以下几种： 1. 使用正则表达式验证：可以通过在输入框的`input`事件中监听用户输入的内容，并使用正则表达式进行验证。在Vue中可以通过指令`v-model`和`@input`来实现这一功能。...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值