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)的时候触发重名校验即可。


版权声明:本文为supelee9527原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。