react中使用antDesign的Input/InputNumber最多保留两位小数,多的小数位禁止输入,且实现输入实时校验并添加千位分隔符
在项目中有一个需求,对输入的金额需要最多保留两位小数,多的小数位禁止输入。使用网上查询的方法很多都不能实现实时校验,大多是输入的多位小数在失焦后再处理为两位小数,并不满足我这个项目的需求,经过多次改造尝试符合预期效果,特此写下笔记分享。1.在input中实现,主要利用Form.Item自带的属性getValueFromEvent<Col span={10}><Form.Item
·
在项目中有一个需求,对输入的金额需要最多保留两位小数,多的小数位禁止输入。使用网上查询的方法很多都不能实现实时校验,大多是输入的多位小数在失焦后再处理为两位小数,并不满足我这个项目的需求,经过多次改造尝试符合预期效果,特此写下笔记分享。
1.在input中实现,主要利用Form.Item自带的属性getValueFromEvent
<Col span={10}>
<Form.Item
label="金额"
name="amount"
getValueFromEvent={(event: any) => {
return event.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两位小数
}}
rules={[
{
required: true,
pattern: new RegExp(/^(([1-9]\d*)|\d)(\.\d{1,2})?$/, 'g'), // 只能输入数字跟小数点 两位小数
message: '请输入正确的金额',
},
]}
>
<Input />
</Form.Item>
</Col>
实现效果:
如果要添加千位分隔符,可参考以下,但是需注意表单提交时需对值进行处理替换分隔符
<Col span={10}>
<Form.Item
label="金额"
name="amount"
getValueFromEvent={(event: any) => {
//先替换掉千位分隔符,如果此处未替换,下面的值会混乱
const value = event.target.value.replace(/,/g, '');
//重新限制只能输入两位小数并,添加千位千位分隔符
return value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,');
}}
rules={[
{
required: true,
pattern: new RegExp(/^\d+(,\d\d\d)*.\d+$/), // 只能输入数字跟小数点及分隔符 两位小数
message: '请输入正确的金额',
},
]}
>
<Input />
</Form.Item>
</Col>
2.在inputNumber中实现,并添加千位分隔符
ps:对InputNumber进行限制,主要是借助它的属性formatter等实现,表单提交时不需要对值进行处理去掉分隔符
//定义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>
实现效果:
更多推荐
已为社区贡献1条内容
所有评论(0)