antd - form表单校验踩坑记录

form表单校验时，发现提示信息一直不显示

原因：是因为form表单中有用到了自定义校验，但是callback没有正确调用

antd文档中有提到：

1 使用了自定义校验时，在自定义校验callback必须被调用

2 callback(‘xxx’) 表示校验未通过、callback() 表示校验通过

3 可以选择返回一个 promise 获取第三个参数callback()

部分代码：

getFieldDecorator('itemName', {
            initialValue: itemName,
            rules: [{
                required: true,
                message: "请输入xxxxxx",
                validator: (rule, value) => {
                    const reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
                   if(value){
                     if(!reg.test(value)){
                        return Promise.reject('请输入xxxx');
        }       
                        return Promise.resolve(); 
        }
    }
   }],
  })(<Input placeholder="请输入xxxxx" style={{width: 350}} />)

或者

       {
          validator: (rule, value, callback) => {
               if (value === undefined || value === null) {
                       callback()
                }
              else {
                   var mobile = value;
                   var tel = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
                   var phone = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
                    if (mobile.length === 11) {
                           if (!phone.test(mobile)) {
                                  callback('请输入')
                    }
                    else {
                          callback()
                   }
                   }
                else {
                       if (!tel.test(mobile)) {
                                 callback('请输入')
                        }else {
                             callback()
                         }
                       }
                      callback()
                  }
             }
        }
   ],