Antd Design的inputNumber实现千位分隔符和小数点并存

代码来自文章: react中使用antDesign的Input/InputNumber最多保留两位小数，多的小数位禁止输入，且实现输入实时校验并添加千位分隔符, 正则忘了很多, 我主要做个笔记.

//定义InputNumber的参数              
const NumberProps = {
    min: '0',//最小值
    max: '999999999999999.99',//最大值
    stringMode: true,//字符值模式，开启后支持高精度小数
    step: '0.01',//小数位数
    formatter: (value: any) => {//指定输入框展示值的格式
      const reg1 = `${value}`.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      return reg1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      //如果不需要添加千位分隔符可以直接返回return reg1 
    },
  };
 
			//在InputNumber中使用NumberProps 
             <Col span={10}>
                <Form.Item
                  label="金额"
                  name="amount"
                  rules={[
                    {
                      required: true,
                      message: '请输入金额',
                    },
                  ]}
                >
                  <InputNumber {...NumberProps} style={{ width: '100%' }} />
                </Form.Item>
              </Col>

这里主要涉及到了两个正则表达式:

value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
value1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

第一个表达式的作用是: 保证在 inputNumber 的框中的数字, 小数点后只能保留两位, 第三位就输不进去了.

正则表达式详解:

^ 行开头
$ 行结尾
点号.可以匹配一个任意字符，仅1次。
星号*可以复制它之前那个字符任意次数，包括0次，即[0, +∞]次。
+ 表示0个以上个; + 号前面的字符必须至少出现一次（1次或多次), 即[1, +∞]次。
? 表示0个或者1个
例：colou?r 可以匹配 color 或者 colour，
? 问号代表前面的字符最多只可以出现一次（0次、或1次）。

value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');

(\-)* 表示存在负数的情况, * 也可以是0次, 所以正负数都会被匹配进去。但是有个问题 , --121215644.061245这种数字也是满足匹配条件的, 所以可以改成 (\-)?, ? 表示0个或者1个 -, 避免特殊情况

(\d+) 表示匹配一个或多个数字

\. 中 \ 是转义符, 意思是匹配.(小数点)

(\d\d).* 也是匹配数字, 不过这里匹配的是小数点后的数字, 有两个 \d 是因为小数点后保留两位小数(第三位是输不了的)

$1$2$3 是匹配符（占位符）, 每个对应一个 () 分组.

这里原先有个疑问, 前面不是已经设置了 stringMode: true, step: '0.01' 开启了支持高精度小数的模式, 并且把精度设置为小数点后两位了吗, 为什么还要设置这个正则?

测试后发现, stringMode: true, step: '0.01' 并不能限制小数点后只保留两位，小数点后仍然可以输入任意位数的数字。这两句只能保证在点击右边的上下两个按钮时，小数点后的第二位发生变化。比如点击增加按钮，小数点后变成 .0912
在这里插入图片描述

第二个表达式的作用是: 使用千分符进行分隔. 这个正则表达式在antd示例中就已经给出了.

value1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

\b 是正则表达式规定的一个特殊代码（好吧，某些人叫它元字符，metacharacter），代表着单词的开头或结尾，也就是单词的分界处。虽然通常英文的单词是由空格，标点符号或者换行来分隔的，但是 \b 并不匹配这些单词分隔字符中的任何一个，它只匹配一个位置。

如果需要更精确的说法，\b 匹配这样的位置：它的前一个字符和后一个字符必须是\w （字母数字）和 \W （非字母数字），即匹配必须出现在 \w （字母数字）和 \W （非字母数字）字符之间的边界上。
\b属于匹配位置的元字符，一般作占位作用，而不被捕获，同属于匹配位置的还有匹配行起始位^和行结束位$

Antd Design的inputNumber实现千位分隔符和小数点并存

悦读