关于Antd Form表单验证

写项目的时候碰到了一个问题，记录一下，关于Antd Form表单验证的问题。 问题描述： 当鼠标失焦这个input框的时候就进行验证，验证input输入内容是否与之前数据的名称有重复，然后随即在form下面展示错误信息。

思路： 直接进antd 组件库找到form组件，然后看到api里面有验证输入信息的一个字段Rule介绍

Rule具体的api如下：

平时我们写表单验证的时候，经常会用到的字段是required，如果必须的话就设置为true，然后写上message的提示信息。像下面这样：

但是想要自己定义他的验证规则，就需要自己进行定义，然后就发现一个字段validator，看描述可以自定义一个方法用来做验证，然后自己尝试了一下。

组件里面要这样写：

然后validator后面的这个方法就可以写验证的逻辑了，如下：

  checkName = (_, val) => {
  // val就是你输入的input框的值
  // 下面写你想要验证的信息，不通过就返回失败的Promise
    if (...) {
      return Promise.reject('提示你想要的错误');
    } else if (...) {
      return Promise.reject('提示你想要的错误'');
    } else if (...) {
      return Promise.reject('提示你想要的错误'');
    } else {
      // 如果所有验证都通过的话就返回成功的Promise
      return Promise.resolve();
    }
  };

当然在这个代码逻辑里面也可以进行异步的请求。

然后因为项目需要在失焦的时候就展示错误的信息，所以还需要用到一个字段validateTrigger，这个字段表示的是，验证触发的时机，onBlur，onChange等等。

到这就可以完美的跑起来了。