简单分析antd如何做Form表单验证

前言

form表单是是我们最熟悉不过了，目前市场上许多UI框架针对form表单做了封装，使其功能非常强大，比如，表单验证，表单美化...

今天我们针对antd的表单校验做一个探讨

在分析antd-form组件的时候，发现表单一些列功能都是 rc-field-form 实现的，那么接下来的重点直接就放到rc-field-form 是如何实现表单校验的

可以学到

1. Form与Field组件是干什么的
2. useForm是什么
3. 表单校验流程
4. 表单为什么强刷新，怎么强刷新

表单验证流程

代码实现

Demo

Form 干了哪些

1. 创建formStore仓库&formInstance（form表单操作）

• formStore：form实例所有的方法，store...

• formInstance：form实例向外暴露的方法

Field干了哪些

1. 将自己的实例注册到formStore中

   • 从formInstance.getInternalHooks获取registerField方法，并通过registerField方法将Field实例注册到formStore中，方便从fromStore中集中获取Field实例并做校验

2. 根据 validateTrigger 重写 触发校验事件

重写 child 属性，主要是触发事件

默认触发事件是 onChange，当Input组件触发了onChange，就会派发 validateField

dispatch({
    type: 'validateField',
    namePath,
    triggerName,
});

3. validateFields 校验

借助async-validator 框架校验，并返回error信息，缓存到实例Field上，然后强刷组件，将错误信息展示到页面

这里强刷分为两个强刷，一个是Field强刷，还有就是Form强刷

总结

1. Form主要通过useForm创建了formStore和formInstance
2. Field，实例化后将自己托管到formStore中
3. onChange → validateFields → save error → force update → getFieldsError → view
4. formStore数据变更，需要强刷，重新渲染页面
5. 强刷新有两个：
   1. Feild：this.forceUpdate()
   2. Form：forceUpdate