antdesign inputNumber 校验2位小数

152 阅读1分钟

两位小数。


 <InputNumber 
   min={-10000}
   max={10000}
   addonAfter="元"
   formatter={value => {
    return (
      `${value}`
        .replace(/\B(?=(\d{3})+(?!\d))/g, "")
        .replace(/^(-)*(\d+).(\d\d).*$/, "$1$2.$3") + '元'
    );
  }}
  parser={value => {
    return value
      .replace(new RegExp('元', "g"), "")
      .replace(new RegExp(/[^0-9.-]/, "g"), "")
      .replace(/^(-)*(\d+).(\d\d).*$/, "$1$2.$3");
  }}
   placeholder='请输入'/>

常用demo

    <Col span={8}>
                        <Form.Item

                          label="报价"
                          name={[name, 'amount']}
                          rules={[{ required: true, message: '报价' }]}
                        >
                          <InputNumber
                           precision={2} 
                           formatter={value=>{
                            return (
                              `${value}`
                              .replace(/\B(?=(\d{3})+(?!\d))/g, "")
                              .replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3") 
                            )
                           }}
                          addonAfter="元" style={{ width: '100%' }} onChange={handeInput} />
                        </Form.Item></Col>

三位小数


<InputNumber 
   min={-10000}
   max={10000}
   formatter={value => {
    return (
      `${value}`
        .replace(/\B(?=(\d{3})+(?!\d))/g, "")
        .replace(/^(-)*(\d+).(\d\d\d).*$/, "$1$2.$3") + '元'
    );
  }}
  parser={value => {
    return value
      .replace(new RegExp('元', "g"), "")
      .replace(new RegExp(/[^0-9.-]/, "g"), "")
      .replace(/^(-)*(\d+).(\d\d\d).*$/, "$1$2.$3");
  }}
   placeholder='请输入'/>

    
使用 precision, 会四舍五入。如果不符合请勿使用


<InputNumber 
   min={-10000}
   max={10000}
   precision={2}
   formatter={value => {
    return (
      `${value}` + '元'
    );
  }}
  parser={value => {
    return value.replace(new RegExp('元', "g"), "")
  }}
   placeholder='请输入'/>