我们在进行表单验证的时候，什么时候进行校验，什么时候提示错误信息以及在什么位置，都会影响到用户体验，所以要根据不同场景进行响应的校验。
先说错误信息位置，在antd中，Form的报错信息全部都是在表单的下方红色字体并且所有下面表单相应往下平移，如果我们想要修改报错的位置可以直接找到相对应类名，直接重写来覆盖掉原有的样式。 下面看一个图：
像上图这种，我们所有的位置都定好了，出现报错信息页面就会产生错乱，所以就需要修改一下默认位置。
首先查看元素找到控制错误信息的类名
找到以后就直接修改为自己想要的样式就行，这里我想要在后面
.ant-form-item-explain {
position: absolute;
right: -120px;
width: 100px;
height: 32px;
line-height: 32px;
background: #fff;
padding-left: 5px;
border-radius: 3px;
}
.ant-form-item-explain::before {
display: block;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid #fff;
border-bottom: 5px solid transparent;
z-index: 99;
position: absolute;
left: -10px;
top: 10px;
}
注意： 只修改.ant-form-item-explain这个类名，可以加上自己的父类名，不要加.ant-form-item-with-help，他有两种出现错误的时机，另一个时机不在.ant-form-item-with-help下，如果加了就会出现下图这种效果，所以千万不要加
最终结果就是这样：
再说一下校验，根据场景可以分为以下3种：
- 用户一边输入一边校验----
onChange； - 单个表单输入完毕，输入框失去焦点以后校验----
onBlur； - 所有表单都输入完毕，点击提交或者下一步时校验----
onSubmit；
官方提供validateTrigger字段来设置触发验证时机，
| Form | Form.Item | rules | |
|---|---|---|---|
| 说明 | 统一设置字段触发验证的时机 | 设置字段校验的时机 | 设置触发验证时机，必须是 Form.Item 的 validateTrigger 的子集 |
| 类型 | string | string[] | string | string[] | string | string[] |
| 默认值 | onChange | onChange | |
| 版本 | 4.3.0 |
通过上表，我们可以看到可以在哪里用到validateTrigger,并且给什么值，从上表可以看出来，如果什么都不设置，默认就是onChange,所以可以不用管，直接看其他两种：
onBlur失去焦点触发验证
onSubmit表单提交触发验证
<Form.Item
name='username'
//validateTrigger='onBlur' 两种都可以
validateTrigger={['onBlur']}
rules={[
{
required: true,
message: '请输入用户名' ,
//validateTrigger : 'onBlur'
validateTrigger : ['onBlur']
},
{
validator: (_, value) => {
//自定义校验加判断，一定要加上 value && 否则不近会出现定义好的错误信息，还有系统的错误信息
if (value && value.toUpperCase() !== 'ADMIN') {
return Promise.reject('该用户不存在');
}
return Promise.resolve();
},
validateTrigger: ['onSubmit']
}
]}
>
<Input
maxLength={16}
placeholder='用户名'
/>
</Form.Item>
注意： 在Form.Item中写的onBlur会覆盖掉我们在rules中自定义校验部分，在rules中的validateTrigger参数只有onChange(也就是默认)的时候生效，其他都不生效，程序应该是判断了onChange和为空的情况，无论写什么都只在表单提交的时候和在Form.Item定义好的方式验证。
