form表单调接口校验 比如后台验证用户名是否存在

Posted 2021-03-18 rong88

<FormItem {...formItemLayout} label={‘显示名‘}>
                {getFieldDecorator(‘displayName‘, {
                  initialValue: displayName,
                  validateTrigger: ‘onBlur‘,
                  rules: [
                    { transform: val => val && val.trim() },
                    { required: true, message: ‘请输入显示名‘ },
                    { max: 20, message: ‘显示名长度必须小于等于20字符‘ },
                    {
                      validator: (rlue, value, cb) => {
                        if (value) {
                          checkNickname(value).then((res) => {
                            const { success, data } = res;
                            // 接口成功
                            if (success) {
                              // 存在重名
                              if (data.hasDisplayName) {
                                this.props.setFields({
                                  displayName: {
                                    value: displayName,
                                    errors: [new Error(‘此显示名已被使用！‘)],
                                  },
                                })
                              } else {
                                cb();
                              }
                            }
                          })
                        } else {
                          cb();
                        }
                      }
                    }
                  ]
                })(
                  <Input />
                )}
              </FormItem>

注意cb回调