JavaScript 之 限制输入框值的整数小数位数

Posted 2023-02-23 zhuangwei_8256

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

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

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

话不多说，上代码：

/**
 * 限制输入框值的整数、小数位数
 * 默认限制2位小数，整数位不限制
 * @param number | string value，需要位数限制的值
 * @param number integerMax，通过指定integerMax值进行整数位的位数限制
 * @param number digits，通过指定digits值进行小数位的位数限制
 * @returns string value，返回一个位数限制的值
 */
function checkNum(value, integerMax, digits) 
	let reg;
	if (integerMax) 
	    reg = new RegExp(`^(\\\\-)*(\\\\d$integerMax).*$`); // 通过 integerMax 限制整数位,
	    if (!value.includes('.')) 
	      value = value.replace(reg, '$1$2');
	    
	
	if (digits) 
	    reg = new RegExp(`^(-)*(\\\\d*)\\\\.(\\\\d0,$digits).*$`); // 通过 digits 限制小数位,
	    value = value.replace(reg, '$1$2.$3');
	
	if (integerMax && digits) 
	    reg = new RegExp(`^(-)*(\\\\d$integerMax).*\\\\.(\\\\d0,$digits).*$`);
	 else 
	    reg = new RegExp(`^(-)*(\\\\d*).*\\\\.(\\\\d0,2).*$`);
	
	
    value = value.replace(reg, '$1$2.$3');
    return value

 
 

如有不足，望大家多多指点！ 谢谢！