el-input限制只能输入规定的数

Hi梅

已于 2022-07-26 15:35:08 修改

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 前端文章标签： elementui

于 2022-07-26 15:16:28 首次发布

本文链接：https://blog.csdn.net/qq_45502336/article/details/125995465

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

Vue

20 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript正则表达式在Vue.js的el-input组件中限制用户只能输入正整数和精确到小数点后两位的正数。方法是在el-input标签中添加oninput事件，分别应用不同的正则表达式来实现输入限制，确保数据格式的正确性。

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

1. el-input限制只能输入正整数

 oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"

替换代码添加至el-input中

<el-input
  style="width:80px;"
  @change="update(item)"
  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
  v-model="item.quantity"
  placeholder="请输入购买数量"
></el-input>

2. el-input限制只能输入正数和小数点后二位

oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"

替换代码添加至el-input中

<el-input
  style="width:80px;"
  oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
  @change="update(item)"
  v-model="item.freight"
  placeholder="请输入运费"
></el-input>