JavaScript 之 限制输入框的整数、小数位数；限制正整数；限制大于0的数；限制大于0并且只能保留两位小数

  
  工作中，经常能够碰到产品提的需求：限制数字输入框的小数只能输入多少多少位，更有甚者，还会限制输入的整数只能输入多少多少位，或者还有同时限制整数位以及小数位的情况；

  实现的思路也很简单，利用 replace 匹配 正则将输入的值替换掉即可；需要注意的是使用正则时由于需要动态的绑定位数的值，故：

• 使用构造函数创建正则对象；
• 使用构造函数创建正则对象需要注意的是：需要常规的字符转义规则（在前面加反斜杠 \）。

代码：

• 限制整数位、小数位，可输入负数，可单独设置整数位或者小数位的限制：

function restrictNum(value, integerMax, digits) {
    let reg = new RegExp(`^(-)*(\\d*).*\\.(\\d{0,2}).*$`)

    // 如果只限制了整数位，不限制小数位
    if (integerMax && !digits) {
        reg = new RegExp(`^(\\-)*(\\d{${integerMax}}(?:\\.\\d{0,})?).*$`) // 通过 integerMax 限制整数位
        return value.replace(reg, '$1$2')
    }

    // 如果只限制了小数位，不限制整数位
    if (digits && !integerMax) {
        reg = new RegExp(`^(-)*(\\d*)\\.(\\d{0,${digits}}).*$`) // 通过 digits 限制小数位
    }

    // 如果整数位、小数位都有限制的情况下
    if (integerMax && digits) {
        reg = new RegExp(`^(-)*(\\d{${integerMax}}).*\\.(\\d{0,${digits}}).*$`)
    }

    return value.replace(reg, '$1$2.$3')
}

• 大于0的正整数，可限制整数位：

// 大于0的正整数，可限制整数位
function checkPosInteger(value, integerMax) {
    let reg = new RegExp(`^(\\d{${integerMax}}).*$`)
    return value.replace(/^(0+)|[^\d]+/g, '').replace(reg, '$1')
}

• 大于0的数（可输入小数），可限制整数位、小数位

// 大于0的数，可限制小数位
function checkGreaterZero(value, integerMax, digits) {
    let reg = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,})?).*$`, 'g')

    // 如果整数位、小数位都有限制的情况下
    if (integerMax && digits) {
        reg = new RegExp(`^\\D*(\\d{${integerMax}}(?:\\.\\d{0,${digits}})?).*$`, 'g')
    }

    // 如果只限制了小数位，不限制整数位
    if (digits && !integerMax) {
        reg = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,${digits}})?).*$`, 'g')
    }

    // 如果只限制了整数位，不限制小数位
    if (integerMax && !digits) {
        reg = new RegExp(`^\\D*(\\d{${integerMax}}(?:\\.\\d{0,})?).*$`, 'g')
    }

    return value.replace(reg, '$1')
}

调用

<input type="text" placeholder="大于0的正整数" oninput="value = checkPosInteger(value, 2)" />

<input type="text" placeholder="大于0的数，可限制小数位" oninput="value = checkGreaterZero(value, '', 2)" />

<input type="text" placeholder="限制整数位、小数位，可输入负数" oninput="value = restrictNum(value, 4)" />

 

常用的两种输入框限制

代码

• 限制只能输入正整数

  const checkNum2 = (e: any) => {
    return e.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1')
  }
  

• 限制只能输入正数，并且只能保留两位小数

  const checkNum2 = (e: any) => {
    return e.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1')
  }
  

调用

<el-input
  v-model="item.activeProjectSpecname"
  type="number"
  min="1"
  :input-style="{ width: 'auto' }"
  @input="(value) => (item.activeProjectSpecname = checkNum(value))"
/>

<el-input
  v-model="item.activeProjectPrice"
  style="width: 352px"
  @input="(value) => (item.activeProjectPrice = checkNum2(value))"
/>