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

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

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

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

代码：

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

function restrictNumber(value, integerMax, digits) {
	// 不能.开头，将不是数值.-的替换为空
    let val = value.replace(/^(\.+)|[^\d.-]+/g, '');

    let reg = new RegExp(`^(-)*(\\d*).*\\.(\\d{0,2}).*$`);

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

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

    // 如果整数位、小数位都有限制的情况下
    if (integerMax && digits) {
        if (val.includes('.')) {
            reg = new RegExp(`^(-)*(\\d{${integerMax}})\.*\\.(\\d{0,${digits}}).*$`);
            return val.replace(reg, '$1$2.$3');
        } else {
            reg = new RegExp(`^(\\-)*(\\d{${integerMax}}(?:\\.\\d{0,})?).*$`); // 通过 integerMax 限制整数位
            return val.replace(reg, '$1$2');
        }
    }
}

• 正整数，可限制整数位：

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

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

// 大于0的数，可限制小数位
function restrictGreaterZero(value, integerMax, digits) {
	// 不能.开头，将不是数值.的替换为空
	let val = value.replace(/^(\.+)|[^\d.]+/g, '');

    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 val.replace(reg, '$1')
}

调用

<input type="text" placeholder="正整数" oninput="value = restrictPositiveInteger(value, 2)" />

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

<input type="text" placeholder="限制整数位、小数位，可输入负数" oninput="value = restrictNumber(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))"
/>