vue input输入框限制输入负号、数字、以及两位小数

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

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

14 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_44170108/article/details/128182433

文章标签：

#vue #正则表达式 #input输入框限制

文章介绍了在Vue.js中使用el-input组件时，如何通过v-model和正则表达式限制用户输入，确保输入的是数字，并可控制小数点后的位数。包括不允许输入非数字字符、允许正数和0的两位小数、以及允许正负数的两位小数的情况。同时，针对输入中文后无法正确显示的问题，提出了在@change事件中处理的解决方案。

只能输入数字

<!-- 只能输入数字，且长度最长为16位（maxlength="16"） -->
<el-input
 v-model.trim="form.testA"
 maxlength="16"
 onkeyup="value=value.replace(/\D/g,'')"
 onafterpaste="value=value.replace(/\D/g,'')"
 @blur="form.testA=$event.target.value"

只能输入数字，允许输入小数点，且只能输入两位小数（正数、0）

<!-- 只能输入数字，允许输入小数点，且只能输入两位小数（正数） -->
<el-input
 v-model.trim="form.testA"
 maxlength="16"
 oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
 @blur="form.testA=$event.target.value"
/>

只能输入数字，允许输入小数点和负号，且只能输入两位小数（正数、负数、0）

<!-- 只能输入数字，允许输入小数点和负号，且只能输入两位小数（正数、负数、0） -->
<el-input
  v-model.trim="form.testA"
  maxlength="16"
  oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
  @blur="form.testA=$event.target.value"
/>

若输入中文后，在输入正确的值，值没有变化、显示上一次的值，可在@change中传入$event：

<!--  -->
<el-input
  v-model.trim="form.testA"
  maxlength="16"
  oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
  @blur="form.testA=$event.target.value"
  @change="changeContent(row, $index, $event)"
/>
 
changeContent(row,index,event) {
  this.$set(row, 'testA', event) // 赋值
}

转自：https://blog.youkuaiyun.com/qq_44170108/article/details/128182433