el-input 限制只能输数字

_格鲁特宝宝

已于 2022-06-29 11:41:36 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Element UI Web FrontEnd Vue 文章标签： javascript 开发语言限制只能输入数字只能输入数字 οnkeyup

于 2022-06-29 11:40:50 首次发布

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.youkuaiyun.com/GrootBaby/article/details/125517281

Web FrontEnd 同时被 3 个专栏收录

226 篇文章

订阅专栏

Vue

55 篇文章

订阅专栏

Element UI

21 篇文章

订阅专栏

本文详细介绍了在Vue中限制el-input组件只能输入数字的三种常见方法，包括设置type属性为'number'、使用v-model.number以及通过oninput事件结合正则表达式过滤非数字字符。每种方法的优缺点和适用场景都有所阐述，其中推荐使用oninput事件结合正则表达式的方案，因为它既能实现数字限制，又不影响其他属性的正常使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-input 限制只能输数字

方法一：

通过设置type属性：type="number"

<el-input
  maxlength="11"
  type="number"
  v-model="ruleForm.phone"
  placeholder="请输入联系方式"
  show-word-limit
></el-input>

但是这种方式一般会影响样式，不建议使用，如图：

方法二：

通过绑定值限制的方式：v-model.number="ruleForm.phone"

但是这种方式会限制一般的数字，但是会影响 maxlength 属性，并且 e 是可以输入的，一般情况可以使用，严格限制的话不建议

方法三：

建议使用

通过对绑定的 value 值进行正则限制：οnkeyup="value=value.replace(/[^\d]/g, ' ')"

绑定一个onkeyup监听事件， /[^\d]/g 是用来匹配所有非数字内容的正则表达式，将之替换成空字符串，这种方式不会影响任何属性

<el-input
  maxlength="11"
  v-model="ruleForm.phone"
  placeholder="请输入联系方式"
  show-word-limit
  oninput="value=value.replace(/[^\d]/g,'')"
></el-input>