Antd的validator自定義校驗導致其它校驗規則失效

<FormItem
  label="新賬號"
  name="phone"
  rules={[
    { required: true, message: "不能爲空" },
    { max: 20, message: "最長20個字符" },
    {
      whitespace: true,
      message: "不能輸入空格",
    },
    {
      type: "number",
      transform: (val) => Number(val),
      message: "只能輸入數字",
    },
    {
      validator: this.onCheckPhone,
    },
  ]}
>
  <Input placeholder="請輸入手機號" />
</FormItem>

我這個自定義檢驗主要功能是發到後端去查重，同時還需要保留手機號的格式校驗，代碼如下：

onCheckPhone = (rule, value) => {
  return new Promise(async (resolve, reject) => {
    const { dispatch } = this.props;
    const { currAreaCode } = this.state;
    if (currAreaCode && value) {
      const res = await dispatch({
        type: "userManagement/checkPhone",
        payload: { phone: `${currAreaCode}-${value}` },
      });
      if (typeof res !== "number") {
        resolve();
      } else {
        reject(new Error("該賬號已存在！"));
      }
    }
  });
};

代碼結構就醬嬸，我預想的是，validator 還會和其它校驗規則同時校驗，但是發現並不能。然後查了查 issue，無果… 果斷問了一下度娘，OK，解決。

原來，這個 validator 的規則需要在所有的判斷邏輯裏面都要加入 callback，保證要覆蓋到所有情況，不然就會阻塞其它的校驗規則。so…簡單改造了一下

onCheckPhone = (rule, value) => {
  return new Promise(async (resolve, reject) => {
    const { dispatch } = this.props;
    const { currAreaCode } = this.state;
    if (currAreaCode && value) {
      const res = await dispatch({
        type: "userManagement/checkPhone",
        payload: { phone: `${currAreaCode}-${value}` },
      });
      if (typeof res !== "number") {
        resolve();
      } else {
        reject(new Error("該賬號已存在！"));
      }
    } else {
      // 這裏加了一個 resolve
      resolve();
    }
  });
};

由於我用的是 Antd V4，validator 的 API 進行了修改，改用 Promise。所以如果你是老版本用戶，直接調用原來的 callback 回調即可。