输入框小数位限制

Posted 2023-05-15

参考技术A 目前做输入框常用的控件就是textField 和 textView. 那么平时的场景是什么呢?
1、输入要求不能超过多大的值
2、保留2位小数
3、金额输入.....

在遇到这样的需求时,常常会针对不同的要求做不同的限制.
在这里我们稍稍分享一下技术实现的细节
这个主要思路还是通过控制文本的输入来进行校验的.

在这说下这个过程:
首先判断小数位数,
然后去限制大小. 通过 range.length 来判断是输入还是删除.
然后控制只能输入一个小数点,防止输入多个
最后控制输入的值是否超过最大值.

目前算是一个简版,可以通过控制键盘,来进行输入限制.
也可以通过正则方式来控制.随后再更新即可.

textField和textView的实现思路是一致的.不再赘述,具体可以参考 Demo 即可.

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

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

  实现的思路也很简单，利用 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

 
 

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