antd自定义表单校验规则

antd的表单校验提供了大部分的校验规则，包括验空，长度，正则等，但还是有一些情况需要我们手写校验规则。以下就是一个例子，要求输入的字符不能超过20个字节**
这里要注意的是输入不是字符长度而是字节，因此不是简单的判断字符串的length，而是要对字符串进行处理，将中文处理未双字节后再取长度进行判断，代码如下所示：

<Item
        label="活动名称"
        name="name"
        required
        rules={[
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (value.replace(/[\u4e00-\u9fa5]/g, 'aa').length > 20) {
                return Promise.reject(new Error('不能超过20个字节'));
              }
              return Promise.resolve();
            },
          }),
          {
            required: true,
            message: '请输入活动名称',
          },
        ]}
       
        wrapperCol={{ span: 10 }}
      >
        <Input
          autoComplete="false"
          suffix="0/10"
        />
      </Item>

今天做项目才发现上段代码有问题，在自定义了校验规则的情况下，rules最好是只有一个，如果加上了别的校验规则，可能会触发两次校验，如图所示

截屏2021-12-27 下午3.58.14.png

所以，验空的话最好放在自定义校验规则中，如下所示：

 <Item
            label="仓库地址"
            name="warehouseAddress"
            rules={[
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value) {
                    return Promise.reject(new Error('请选择仓库地址'));
                  }
                  if (value.length < 3) {
                    return Promise.reject(new Error('地址需选择到区'));
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Cascader
              changeOnSelect
              loadData={loadData}
              options={addressOptions}
            />
          </Item>

效果：

截屏2021-12-27 下午4.08.24.png