react+antd自定义校验以及校验空格

ゞ浴缸里的玫瑰 2022-12-29 11:30 330阅读 0赞

## 自定义校验，在form.Item中添加`rules->validator` ##

<Form.Item
                        labelCol={ {  span: 10 }}
                        wrapperCol={ {  span: 4 }}
                        label={ language.messages["device.currentSpeedMax"]}
                      >
                        { getFieldDecorator('currentSpeedMax', { 
                          initialValue: objectData?.currentSpeedMax,
                          rules: [
                            {  validator: (rule: any, value = "", callback: any) => validateHeightAndMin(value, callback, 'currentSpeedMax') }
                          ]
                        })(<InputNumber precision={ currentPrecision} min={ 0} className={ "my-input"}
                          size={ "default"} style={ {  width: 157 }} placeholder={ language.messages["form.pleaseinput"]} />)}
                      </Form.Item>

**`validateHeightAndMin`方法如下，其中callback()是必须要返回的，不然所有的校验都会失效:**

const validateHeightAndMin = (value: any, callback: any, alarmAttr: string) => { 
        if (alarmAttr.indexOf("Max") != -1) { 
          const lowAttr = alarmAttr.split("Max")[0] + "Min";
          if (parseFloat(form.getFieldsValue()[lowAttr]) > parseFloat(value)) { 
            const back = intl.formatMessage({  id: `device.${ alarmAttr}` }) + "需大于"
              + intl.formatMessage({  id: `device.${ lowAttr}` })
            callback(back)
          }
        }
        else if (alarmAttr.indexOf("Min") != -1) { 
          const highAttr = alarmAttr.split("Min")[0] + "Max";
          if (parseFloat(form.getFieldsValue()[highAttr]) < parseFloat(value)) { 
            const back = intl.formatMessage({  id: `device.${ alarmAttr}` }) + "需小于"
              + intl.formatMessage({  id: `device.${ highAttr}` })
            callback(back)
          }
        }
        callback()
      }

## 校验输入文本框首字符不能为空格： ##

<Form.Item
                    labelCol={ {  span: 8 }}
                    wrapperCol={ {  span: 8 }}
                    label={ language.messages["device.flowmeterName"]}
                  >
                    { getFieldDecorator('flowmeterName', { 
                      initialValue: objectData?.flowmeterName,
                      rules: [
                        { 
                          required: true, message: language.messages["device.flowmeterNameCannotEmpty"]
                        },
                        { 
                          max: 50, message: language.messages["device.moreThanMaxLength"]
                        },
                      ],
                      getValueFromEvent: (event: any) => { 
                        return event.target.value.replace(/(^\s*)/g, "")
                      },
                    })(<Input placeholder={ language.messages["form.pleaseinput"]} />)}
                  </Form.Item>

**主要是在`getFieldDecorator`中添加如下代码：**

getValueFromEvent: (event: any) => { 
                        return event.target.value.replace(/(^\s*)/g, "")
                      },