input框只取正整数,非负数等整理(以element组件库el-input组件在vue中常见的几种取值筛选为例)_vue element 输入框中 向上取整

1.限定取值为非负整数(可输入0和正整数)限定:

<el-input
      style="width: 300px"
      v-model="value"
      type="number"
      clearable
      placeholder="请输入非负整数"
      min="0"    
      @blur="getRval(value)"
      onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
    ></el-input>
 
getRval(val){     
      console.log(val,typeof(val));     
      this.value = Math.abs(this.value)    //去除中文输入下的负号和 this.value是字符时00开头等乱输        
    },

2.限定取值为非负数(可输入0,和正数(含小数))限定:

<el-input
      style="width: 300px; margin-top: 50px"
      v-model="value2"
      type="number"
      clearable
      placeholder="请输入非负数"
      min="0"
      @blur="getRightVal(value2)"
    ></el-input>
 
getRightVal(val){
      console.log(val,typeof(val));     
      if(val.startsWith("0") && !val.includes('.') && val != 0){
        this.value2 = this.value2.replace(/\b(0+)/gi,"")
      }else{
        this.value2 = Math.abs(this.value2);
      }
    },

3. 限定取值为指定最大小数位的非负数(可输入0,和正数(含指定位数的小数))限定:

<el-input
      style="width: 300px; margin-top: 50px"
      v-model="value3"
      type="number"
      clearable
      placeholder="请输入指定小数位的非负数"
      min="0"
      @input="handleInput"
      @blur="getRightv(value3)"
    ></el-input>
 
 
handleInput(value) {  
      console.log(value);
      if (value != "") {
        if (value.indexOf(".") > -1) {
          this.value3 = value.slice(0, value.indexOf(".") + 3); //2位小数,vaule为input输入值,这个+后面为所需限定的最多小数位+1(例如:想要限定小数点后最多为2位,那么此时就为3)
        } else {
          this.value3 = value;
        }
      }
    },
 
getRightv(val) { //负数转正数,去除首位0
      console.log(val,typeof(val)); 
      if(val.startsWith("0") && !val.includes('.') && val != 0){
        this.value3 = this.value3.replace(/\b(0+)/gi,"")
      }else{
        this.value3 = Math.abs(this.value3);
      }
    },

4.大于0的正整数。

<el-input v-model.trim="ruleForm.demandNumber" placeholder="请输入需求数量" clearable maxlength="10" min="1"
                    style="width: 250px" @input="handleEdit"></el-input>
 
 
 
 
 
// 在 Input 值改变时触发,校验正整数
        handleEdit(e) {
            let value = e.replace(/^(0+)|[^\d]+/g, ''); // 以0开头或者输入非数字，会被替换成空
            value = value.replace(/(\d{10})\d*/, '$1') // 最多保留10位整数
            this.ruleForm.demandNumber = value
        },