vue input限制输入数字

最新推荐文章于 2025-11-13 11:14:10 发布

原创最新推荐文章于 2025-11-13 11:14:10 发布 · 3.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了如何在Vue项目中使用el-input组件，通过正则表达式实现三种不同场景的输入限制：只允许输入数字、只允许输入数字和四位小数以及允许输入数字、小数点和负号。

vue input限制输入数字

1、只能输入数字
2、只能输入数字和小数点（此处限制保留四位小数）
3、只能输入数字、小数点和负号

1、只能输入数字

<el-input
  clearable
  v-model="form.result"
  placeholder="请输入结果"
  onkeyup="value=value.replace(/\D/g,'')"
  onafterpaste="value=value.replace(/\D/g,'')"
  @blur="form.result=$event.target.value"
/>

2、只能输入数字和小数点（此处限制保留四位小数）

<el-input
  clearable
  v-model="form.result"
  placeholder="请输入结果"
  oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,4})?.*$/,'$1')"
  @blur="form.result=$event.target.value"
/>

3、只能输入数字、小数点和负号

<el-input
  clearable
  v-model="form.result"
  placeholder="请输入结果"
  oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,4})?.*$/,'$1')"
  @blur="form.result=$event.target.value"
/>