vue el-input只允许输入整数或小数只保留小数点后两位并设置最大值

el-input只允许输入整数或小数只保留小数点后两位并设置最大值

这里的输入框是动态生成的，所以搞不好了，目前实现的功能是最大值是30，只能输入整数，但是现在没法输入小数了我需要保留一位小数

这是我实现的，但是输入不了小数

TechWhizKid参考GPT回答：

Element UI的el-input组件，用v-model绑定来进行输入控制，但对于你所要的特殊规则（只允许输入整数或者小数并只保留小数点后两位，并设置最大值），要结合watch或者computed属性来进行处理。

这里有个示例，假设最大值是100：

<el-form :model="DailyForm.others">
  <div v-for="(item, index) in DailyForm.others" :key="index">
    <el-form-item label="Others">
      <el-input
        v-model="item.others"
        style="width:230px"
        @input="validateInput(index)"
        :maxlength="item.others.length > 0 && item.others.indexOf('.') !== -1 ? 5 : 3"
        placeholder="请输入数字"
      />
    </el-form-item>
    <e1-form-item label-"Remarks">
      <el-input v-model-"item.remarks"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="deleteotherItem(index)"type="danger"> Delete
      </e1-button>
    </el-form-item>
    <hr />
  </div>
</el-form>

对应的JavaScript：

export default {
  data() {
    return {
      DailyForm: {
        others: [
          { others: '', remarks: '' },
          // ...其他数据
        ]
      }
    };
  },
  methods: {
    validateInput(index) {
      let value = this.DailyForm.others[index].others;
      value = value.toString();
      if (!/^\d+(\.\d{0,2})?$/.test(value) || Number(value) > 100) {
        this.DailyForm.others[index].others = value.slice(0, -1);
      }
    },
    deleteotherItem(index) {
      // 删除操作
      this.DailyForm.others.splice(index, 1);
    },
  },
};

每次当el-input的值变动时，会调用validateInput方法。方法会检查输入的值是否符合规定的模式（是否是整数或者小数，并且最多只有两位小数）以及是否超过了最大值（这里假设为100）。如果不符合这些规则，那么就会删除最后一个字符，即撤销最近的输入。

组件库里不是有校验案例吗，把内容替换一下，再改一下正则

整数 .numbel不行吗，小数，原生js的math方法

直接使用使用 el-input-number

使用数字输入框控件，自带的有数字校验还可以设置最大值小数位。el-input-number

跟我之前做的功能一样，简单阐述下

通过input事件监听输入框修改
通过正则限制数字、开头不能有两个0、两个以上的小数点转换成一个、只保留一个小数点、保存小数点后两位数
设置最大值和最小值
最后将得到的值进行赋值

<el-input v-model="nZoomInput" @input="fnZoomInputBox"></el-input>

methods: {
  // 输入框修改
  fnZoomInputBox (val) {
    let str = val.charAt(0), sInput;
    sInput = val.replace(/[^0-9.]/g, "");
    if (str === "-") sInput = "-" + sInput;
    sInput = this.fnRegUnified(sInput);
    // 设置最小值、最大值
    if (sInput === "" || sInput < 0) {
      sInput = 0;
    } else if (sInput > 100) {
      sInput = 100;
    }
    this.nZoomInput = sInput;
  },
  // 统一正则判断
  fnRegUnified (val) {
    val = val.replace(/^00/, "0."); //开头不能有两个0
    val = val.replace(/^\./g, "0."); //开头为小数点转换为0.
    val = val.replace(/\.{2,}/g, "."); //两个以上的小数点转换成一个
    val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只保留一个小数点
    val = val.replace(new RegExp("^(\\d+)\\.(\\d{2}).*$"), "$1.$2"); // 保留小数点后两位数
    return val;
  }
}

以下答案由GPT-4.0Plus大模型与博主A努力中.......共同编写：

在Vue中,可以使用el-input组件设置这些校验规则:

只允许输入整数或小数,并限制小数点后2位:

使用input的pattern属性,设置正则表达式:/^[0-9]+(.[0-9]{2})?$/

设置最大值max:

使用input的max属性,设置最大值,例如max="100"

代码示例:

vue
<el-input 
  v-model="inputValue"
  pattern="/^[0-9]+(.[0-9]{2})?$/"
  :max="100"
>
</el-input>

data() {
  return {
    inputValue: ''
  }
}

这段代码将:

使input只接受整数或最多2位小数的输入
设置input的最大值为100
input中输入的值将绑定到data中的inputValue
完整demo:

vue
<template>
  <el-input 
    v-model="inputValue"
    pattern="/^[0-9]+(.[0-9]{2})?$/"
    :max="100"
  >
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

这个demo实现了您想要的功能 - el-input组件只允许输入整数或保留2位小数,并限制最大值为100。

在Vue中使用Element UI的el-input组件，并限制只允许输入整数或小数，并保留小数点后两位，可以结合使用type、formatter和max属性来实现。

首先，使用type属性将el-input设置为数字类型，这样输入框只能输入数字值。然后，使用formatter属性来限制小数点后的位数为两位，可以通过正则表达式来实现。最后，使用max属性来设置最大值限制。

以下是一个示例代码：

<template>
  <el-input v-model="inputValue" type="number" :formatter="formatNumber" :max="maxValue"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      maxValue: 100 // 设置最大值为100
    };
  },
  methods: {
    formatNumber(value) {
      // 使用正则表达式限制小数点后的位数为两位
      value = value.toString().replace(/(\.\d{2})\d*$/, '$1');
      return value;
    }
  }
};
</script>

在上面的示例中，inputValue是用来双向绑定输入框的值的变量，maxValue是设置的最大值。formatNumber方法使用正则表达式将输入值限制为小数点后两位，并返回处理后的值。通过v-model指令将输入框的值与inputValue变量进行双向绑定。

请根据您的实际需求和项目配置进行适当调整。

可以通过js写正则表达式校验，校验不通过的强制清除

vue el-input只允许输入整数或小数只保留小数点后两位 并设置最大值

TechWhizKid参考GPT回答：

vue el-input只允许输入整数或小数只保留小数点后两位并设置最大值