正则校验

15 阅读1分钟

1.input输入框收尾去空格

  // 输入框首尾去空格
  const getValueFromEvent = (e: any) => {
    return e.target.value.replace(/(^\s*)|(\s*$)/g, "");
  };
  
  getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any 
  
  
  //demo
    <Form.Item
          label="备注"
          name="remark"
          style={{ marginBottom: '10px' }}
          getValueFromEvent={getValueFromEvent}
        >
          <Input placeholder="请输入备注" allowClear />
        </Form.Item>



2.1只能输入数字

// 输入框只能输入数字
    const getValueFromNumber = (e: any) => {
      return e.target.value.replace(/\D/g, '');
    }
   

2.2只能输入 正整数

new RegExp(/^[0-9]\d*$/, "g")
//demo 使用2.1和2.2

            <Form.Item
                  label="数量"
                  name="material_count"
                  rules={[{
                    required: true,
                    pattern: new RegExp(/^[0-9]\d*$/, "g"),
                    message: '请输入正整数'
                  }]}
                  getValueFromEvent={getValueFromNumber}
                >
                  <Input placeholder="请输入正整数" allowClear />
            </Form.Item>

输入数字并保留2位小数

<Form.Item
                  label="报价"
                  name={"actual_amount"}
                  rules={[{ required: true, message: "报价最多保留2位小数" }]}
                >
                  <InputNumber

                    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>