vue element el-input输入限制数字

最新推荐文章于 2024-07-01 18:24:19 发布
最新推荐文章于 2024-07-01 18:24:19 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： vue 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bivesou/article/details/111563110
版权
针对Vue Element UI中el-input组件，网上的输入限制数字方法可能导致v-model失效。本文提供一种亲测有效的方法，通过在input事件上绑定handleStockRadio方法来确保仅允许输入数字。
摘要由CSDN通过智能技术生成

网上有很多答案都说用
οnkeyup=“value=value.replace(/[^\d]/g,’’)”
可是会导致输入文字后v-mode无法绑定
下面这种方法亲测可用

<el-input :disabled='cooperationSettingType==1' @input="handleStockRadio('thirdSalesTask')" v-model="ruleForm.thirdSalesTask" placeholder=""></el-input>

input方法绑定handleStockRadio方法

handleStockRadio(field)
最低0.47元/天 解锁文章
Bivesou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 输入框限制中英文及数字
LvLin_60的博客
01-09 3347
vue 项目，通过 input 事件 结合 正则表达式实现输入框限制输入中英文及数字 <el-input v-model.trim="value" @input="inputLimit" /> //... methods: { //... inputLimit(val) { // 正则匹配非中英文及数字的字符 let reg = /[^\u4e00-\u9fa5a-zA-Z0-9]/; // 查找是否有非中英文及数字的字符 // 没有则返回-1，有则返回对应位置 l
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件简述limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number安装yarn add vue-limit-input-group 或者npm ...
vue前端el-input输入 限制输入位数以及输入规则
weixin_45807525的博客
08-04 1万+
摘要：配合el-input实现输入内容的校验，仅可输入-号（且在第一位）可控制输入长度 封面图片非原创，侵权必删
el-input 用法
最新发布
qq_33240556的博客
07-01 711
可以通过添加style属性或外部 CSS 类来调整输入框的样式。
vue输入框限制数字
Haines
11-05 614
<el-form-item> <el-input v-model.number="child.sort" class="w100" maxlength="10" @input.native="checkoutNumRange($event,0)" oninput="value=value.replace(/[^\d]/g,'')"></el-input> </el-form-.
element ui input 限制输入数字
yurisa1994的博客
08-15 598
输入的时候验证，仅数字才能输入，一般用于金额等数字输入
VUE限制输入数字
weixin_45479904的博客
09-30 331
VUE限制输入数字
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n;...
vue中el-input绑定键盘按键(按键修饰符)
11-20
在Vue.js中，我们经常需要处理用户输入的键盘事件，特别是在使用Element-UI这样的前端组件库时。Element-UI中的`el-input`组件是用于创建输入框的自定义组件，它封装了一些内置功能，比如自动补全、清除按钮等。然而...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
js vue input textarea 限制每行输入字数，限制输入行数
战国墨竹的博客
09-23 3968
<el-input type="textarea" v-model="xxx" :rows="3" maxlength="33" :show-word-limit="true" @input="((val,name,rowNum,colNum)=>{handleTextarea(val,'xxx',10,3)})" placeholder="请输入xxx"></el-input> /** * @description 校验多行文本验证 * @param .
el-input限制输入整数等分析
热门推荐
Bruce__taotao的博客
11-22 1万+
input 限制输入在平时的需求比较常见，例如限制输入非数字，限制输入整数，限制输入的小数位数等等。这里分析下各种实现方式。使用自定义指令：你可以编写一个自定义指令，通过监听输入事件并验证输入内容，只允许输入整数。以下是一个简单的示例：
element-ui input限制输入数字
cuiyiran_的博客
05-02 1102
代码: HTML 通过@input事件来进行输入的筛选 <el-form-item label="图文排序"> <el-input size="small" v-model="imageTextForm.imageTextSeqNum" placeholder="请填写图文排序(数字)" @input="imageTextInputChange" maxlength="3"></el-input> </el-fo
vue限制textarea字数并显示
真真的博客
04-30 8112
<textarea class="site" maxlength="50" @input="descInput" v-model="desc" placeholder="最多输入50个字" ></textarea> <span class="xianzhi">{{remnant}}/50</span> data(){ return{ rem...
输入框限制输入数字
zyoungw
05-31 1076
1 限制输入正整数（elment-ui） <el-input type="number" v-model="count" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" /> 2 限制保留2为小数 <el-input type="number" @input="onKeyUp" v-model="count"/> export default { data() { return { co
3分钟短文：Laravel的“南天门”，过滤掉七七八八的数据
HMLite的博客
10-24 239
引言 上一章我们教会大家如何从用户表单内正确地获取数据，可是没有讲，获取到的数据到底有啥用，或者说，有的用户提交的数据压根儿就没正经填，那些错乱无效的数据，如果直接放到数据库，纯粹是对数据库的污染。 所以本文就来说说应用程序最重要的一环，验证数据。 代码时间 获取数据的途径除了早前介绍的在路由地址内通过位置参数绑定的方式， 还有上一章介绍的表单提交的方式，还有一些比如在get请求内附加查询参数进行传送的， 不管形式是什么，我们需要将其统一口径，将其规划为规范的数据格式，然后只用把数据发给验证器。 如果你对
el-input输入框校验限制，不可输入负数，小数，文字，0以及最大数限制
weixin_46343439的博客
05-26 3384
设置oninput即可。
Vue el-input限制输入的字符（多种情况 进来看吧）
梁小茹的博客
02-15 8003
通过@input 只能输入英文大小写和数字 及最大长度maxlength <el-form-item label="经营许可证号" prop="businessCertificate"> <el-input v-model="tableList.businessCertificate" maxlength="50" plac
vue自定义指令——input输入类型限制（数字、浮点、整数、英文等），解决中文输入法双向绑定失效问题
pixle的博客
11-12 5953
实现一个vue自定义指令——输入框（input,el-input）输入内容类型限制，解决中文输入法双向绑定失效问题，多种类型支持，数字类型，浮点类型、英文类型、整数类型、四则运算等。
vue elemen ui el-input 限制只能输入数字类型
08-17
在Vue Element UI中，可以使用el-input和type属性来限制只能输入数字类型。例如，可以将type属性设置为"number"，这样输入框就只能接受数字输入。这样做可以解决输入其他字符后无法正确获取新输入值的问题。引用已经...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值