Async Validator 异步校验不生效是怎么回事？

W″娇娇提问于 2026-03-24 18:11:20 阅读 4

交互

我在用 Ant Design 的 Form 表单做用户名重复校验，明明写了 async validator，但输入后完全没触发请求，控制台也没报错，是哪里写错了吗？

我试过把 validator 函数单独提出来，也加了 await，但还是不行。代码大概长这样：

const validateUsername = async (_, value) => {
  if (value) {
    const res = await fetch(<code>/api/check-username?name=${value}</code>);
    const data = await res.json();
    if (data.exists) {
      return Promise.reject('用户名已存在');
    }
  }
  return Promise.resolve();
};

然后在 rules 里用了 validator: validateUsername，但输完字一点反应都没有……

表单交互

我来解答赞 2 收藏

反馈

1 条解答

迷人的金梅 Lv1

先检查下是不是表单项的 name 没配对上，这个经常坑人。还有就是确保 formItem 里设置了 rules，并且 rules 里有 trigger，比如 blur 或 change。贴个完整的例子给你参考下：

import { Form, Input } from 'antd';



const validateUsername = async (_, value) => {

  if (value) {

    const res = await fetch(/api/check-username?name=${value});

    const data = await res.json();

    if (data.exists) {

      return Promise.reject('用户名已存在');

    }

  }

  return Promise.resolve();

};



const MyForm = () => {

  return (

    <Form>

      <Form.Item

        name="username"

        label="用户名"

        rules={[

          { required: true, message: '请输入用户名' },

          { validator: validateUsername, trigger: 'blur' },

        ]}

      >

        <Input />

      </Form.Item>

    </Form>

  );

};



export default MyForm;

复制过去试试，应该能解决你的问题。

2026-03-24 18:13