el-input 限制只能输入非负数字和小数

​

 只允许输入框输入数字和小数，并且不能为负数

下面代码举例：

使用 @input 和正则表达式

<template>
  <el-input v-model="adjustForm.paidinAmount" @input="handleInput"></el-input>
</template>

<script>
export default {
  data() {
    return {
      adjustForm: {
        paidinAmount: "",
      },
    };
  },
  methods: {
     handleInput(value) {
        // 使用正则表达式过滤掉非数字和小数点的字符
        this.adjustForm.paidinAmount = value.replace(/[^0-9.]/g, '');
        // 确保只保留一个小数点
        const parts = this.adjustForm.paidinAmount.split('.');
        if (parts.length > 2) {
          this.adjustForm.paidinAmount = parts[0] + '.' + parts[1];
        }
     }
  }
}
</script>

结合正则表达式和最大长度限制

如果还需要限制小数点后的位数（例如最多两位小数），可以对正则表达式稍作调整：

<template>
  <el-input v-model="adjustForm.paidinAmount" @input="handleInput"></el-input>
</template>

<script>
export default {
  data() {
    return {
      adjustForm: {
        paidinAmount: "",
      },
    };
  },
  methods: {
     handleInput(value) {
        // 仅允许数字和一个小数点，并限制小数点后最多两位
        this.adjustForm.paidinAmount = value.replace(/[^0-9.]/g, ''); // 去除非数字和小数点
        const parts = this.adjustForm.paidinAmount.split('.');
        if (parts.length > 2) {
          // 如果有多个小数点，只保留第一个小数点
          this.adjustForm.paidinAmount = parts[0] + '.' + parts[1];
        }
        if (parts[1] && parts[1].length > 2) {
          // 如果小数点后超过两位，截断
          this.adjustForm.paidinAmount = parts[0] + '.' + parts[1].slice(0, 2);
        }
     }
  }
}
</script>