element中的el-input只能输入数字，输入其他内容清空

已于 2022-06-28 15:56:13 修改
阅读量2.4k 收藏 2
点赞数 4
分类专栏： vue element javaScript 文章标签： elementui vue.js javascript
于 2022-06-28 15:28:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58206564/article/details/125503194
版权
vue 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
element
6 篇文章 0 订阅
订阅专栏
javaScript
4 篇文章 0 订阅
订阅专栏

1、项目需求中 要求 input 查询 id 只能输入数字，不允许输入汉字或者其他特殊字符

 2、模板代码段

<el-form-item label="会员ID:">
   <el-input v-model.trim="formData.memberId" clearable @input="changeMemberId"/>
 </el-form-item>

3、methods方法里面方法，在input 事件中，所有的非数字的内容 全部替换为 空 即可

changeMemberId(val) {
      this.formData.memberId = val.replace(/[^\d]/g, '')
 },

感谢支持，期待你的一键三连！！

发与少年
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI组件el-input输入框只能输入数字或保留两位小数
ldoit的博客
04-21 1万+
只能输入数字的两种方法： 方法一：使用type=“number” <el-input v-model.number='count' type='number' maxlength='9'/> 缺点： maxlength不生效 可以输入e 可以输入小数点 方法二：使用正则表达式 <el-input v-model.number='count' oninput="value=value.replace(/[^\d]/g,'')" maxlength='9'/> 其中v-model.n
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; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,"); return str.length > 1 && str[1] ? `${n1}.${str[
el-input输入框限制只能输入数字
最新发布
qq_39290137的博客
03-25 879
el-input输入框限制只能输入数字
element el-input directive数字进行控制
12-29
使用自定义指令格式化el-input 背景 使用element开发的过程中遇到循环的数据只能输入数字，并且有不要小数点，有需要小数点的 使用vue directive 进行控制 开发 页面使用方式 v-numberInt:0=”item.first_fee” 0为保留几位小数 <el-input v-if=form.valuation_type==1 v-numberInt:0=item.first_fe
前端vue elementui中el-input只能输入数字
qq_53030245的博客
03-30 1万+
方法一 <el-input oninput="value=value.replace(/[^\d.]/g,'')" /> 已上如果输入中文的话，虽然输不进去，但是文本框中的数字不能进行计算。 想要计算的话，可以用以下方法 方法二 <el-input type="number" /> 这样文本框后面会有上下箭头，可以进行加1减1，如果精确到小数的话，这样就不方便，因为加1减1的时候会去掉小数 那么，可以去掉上下箭头的样式 <style scoped> ::v-deep
Element-ui input 输入框限制只能输入数字的问题
qq_35430000的博客
05-17 2万+
需求说明 后台管理系统，使用element-ui el-input组件，要求只能输入数字，最先使用的办法： <el-input v-model.number='count' type='number' maxLength='9' /> 复制代码 存在的问题 1. maxLength不生效 2. 可以输入e 3. 可以输入1.1.....11...1 复制代码 目前解决的办法（可以生效） <el-input v-model='count' oninput="val
element input限制只能输入数字
qq_42919799的博客
02-24 1万+
一、效果 目前这个el-input 属性只能输入数字。 二、参考资料以及理解 参考资料 操作思路： oninput：这是一个input 输入框在输入内容时会执行的事件（在输入框输入内容时就会触发 oninput） 对输入框内容进行监听，监听输入内容的格式，这里使用正则进行限制操作 blur: 监听输入框失去焦点 当输入框失去焦点时，将输入框中的内容进行保存 操作步骤： oninput="value=value.replace(/^\.+|[^\d.]/g,'')" @blur="salaryChan
关于vue的element的输入框el-input限输入只能是数字，包含小数，正数，自然数等等。
qq_32154641的博客
01-17 1万+
关于element的输入框el-input限输入只能是数字，就是包括数字123456,小数的只能一个小数点，不能出现多个小数点，小数可以0开头，但是整数不能0开头，不能输入文字，不能输入负数，所以对于这个我做了两个判断，一个是正则判断，还有一个是0开头的整数判断，正则判断是只能输入数字，只能输入一个小数点，不能输入负数，整数判断是input输入失去焦点的时候，如果是小数0.开头的不管，但是如果不是0.开头的就要把第一个数字0去掉。
关于element-ui的输入框限制只能输入数字的问题
weixin_45021068的博客
01-14 2万+
关于element-ui的输入框限制只能输入数字的问题 这个问题我使用过很多办法,每一种都去尝试，但是结果都不太理想 比如以下的几种方法 注：我要的效果是，输入框内只可输入数字，除了数字其他什么都不可输入，包括标点符号，英文在内 第一种、使用el-input自带原生的 type=“number” 他存在着两个问题 首先，type="number"允许输入e 其次，maxlength属性也不生效 第二种、使用oninput <el-input v-model='width' onin
element中el-input组件限制输入条件(数字、特殊字符)
m0_71231013的博客
07-24 7846
【代码】element中el-input组件限制输入条件(数字、特殊字符)
elementUI input只能输入数字、小数的几种方法
weixin_42397937的博客
03-05 1万+
elementUI <input type="number">时候样式取消
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
el-input-number 默认值设置失效
hu961691590的专栏
08-24 3380
今天需要设置一个计数器在默认情况下是没有值的，有最大值和最小值。在百度上找的答案基本是通过绑定v-model的值为undefined，不知道为什么我这里没有效果，在尝试最简单的计数器下通过v-model绑定也没有成功。在前端的帮助下，通过在el-input-number中设置:min=null实现了默认值是没有值的，因为百度搜的答案都没有解决这种情况的问题，特此记录下来，希望能帮到更多人。 下面是代码和效果图： ...
vue学习之elementUI组件el-input输入框只能输入数字或保留两位小数
King的博客
08-31 1万+
方法一：使用type=“number” <el-input v-model.number='count' type='number' maxlength='9'/> 缺点： maxlength不生效 可以输入e 可以输入小数点 方法二：使用正则表达式 <el-input v-model.number='count' oninput="value=value.replace(/[^\d]/g,'')" maxlength='9'/> 其中v-model.number确保获得的
el-input 给v-model赋了默认值后不能编辑
bollvzwxxiao的博客
12-22 1500
el-input 给v-model赋了默认值后不能编辑
el-input 限制输入框只能输入数字和小数
热门推荐
string佳佳的博客
10-08 3万+
oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字 oninput =“value=value.replace(/[^0-9.]/g,’’)” //只能输入数字和小数 <el-input v-model="sjje" oninput ="value=value.replace(/[^0-9.]/g,'')" class="money ...
el-input只允许输入数字
qq_36959274的博客
01-24 1万+
有时候输入框里只允许输入数字 法一： <el-input v-model="inputValue" onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))"> </el-input>
vue中elementUI中输入框只能输入数字
路人甲的博客
08-25 1687
关于vue中elementUI中输入框只能输入数字，除了数字其他什么都不可输入，包括标点符号，英文在内
element-ui el-input 验证只能输入数字和小数点
HaiJun_Aion的博客
07-03 1363
要在 Element UI 的 el-input 组件中使用正则表达式验证只能输入数字和小数点，可以通过监听 @input 事件，在事件处理函数中使用正则表达式进行验证。请注意，这只是一个简单的示例，仅限于验证输入的值是否为数字和小数点。上述代码中，我们在 el-input 组件上绑定了一个 @input 事件，并在事件处理函数 handleInput 中使用正则表达式 /该正则表达式表示只允许输入数字和小数点，其中 [0-9] 表示数字范围，. 表示小数点， 表示匹配零个或多个。
怎么限制element-ui里el-input只能输入数字
04-05
可以通过设置el-input组件的type属性为number来限制只能输入数字，同时可以设置min和max属性来限制输入的数字范围。示例代码如下： ``` <el-input type="number" min="0" max="100"></el-input> ``` 这样设置后，用户在el-input中输入非数字字符时，输入框中的内容会自动清空。同时，当用户输入的数字超出指定的范围时，输入框中的数字会自动校正到最接近的合法数字。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值