Ant Design踩坑（一）Form自定义校验多次发送请求的问题

Ant Design表单组件的基本用法这里不做具体阐述，如果要看基本用法请移步：https://ant.design/components/form-cn/

Form表单实现自定义校验代码如下:

    checkName = (rule, value, callback) => {
        const name = value;
        if (name) {
          if (/\s/.test(name)) {
            callback(HAP.getMessage('输入存在空格,请检查', 'input Spaces, please check'));
            return;
          }
          const { AppManagementStore } = this.props;
          const { organizationId } = this.state;
          AppManagementStore.checkName(organizationId, name).then(() => {
            callback();
          }).catch((error) => {
            if (error.response && error.response.status === 400) {
              callback(HAP.getMessage('App名称已存在', 'App name already exists'));
            }
          });
        } else {
          callback(HAP.getMessage('该字段是必填项', 'The field is required'));
        }
      };
/////////////////////////////////////////////////////////////////////////////////////

    <Form.Item
      {...formItemLayout}
      label={HAP.languageChange('名称')}
      hasFeedback
    >
      {getFieldDecorator('name', {
          rules: [
            {
              required: true,
              whitespace: true,
              validator: this.checkName,
            },
          ],
      })(
        <Input size="default" />,
      )}
    </Form.Item>

通过上面的代码就可以实现自定义校验。虽然功能上已经实现，但其实上面的代码有一个坑，就是checkName的默认触发事件是Input组件的onChange方法。假如我输入的用户名是admin，checkName方法其实调用了五次，即向服务器发送了五次请求，然后查询数据库判断是否重名。这样的操作是很浪费服务器资源的。测试代码如下：

重名校验其实只需在我们Input输入框失焦的时候向服务端发送数据即可。那么如何实现呢，其实很简单，只需加一行validateTrigger: 'onBlur',代码即可。如图：

那么validateTrigger这个参数是做什么的呢，我们查看下官方api：

看，validateTrigger（这里我姑且称它为校验触发器吧）的默认触发方法是onChange，所以，我们输入admin就会发送5次请求了。我们只需指定在Input失焦（onBlur）的时候触发重名校验即可。