antd-vue 2.x 表单验证的坑，你遇到过么

好多年没有写博客了，突然写一篇。

最近学习AntdVue2.x+Vue3.x ，据说antdv 特别优秀，更新也及时还适配了vue3，所以，选择了antdv，而不是elementui，虽然elementui也有新版本了，但是总觉得那不是同一套体系了

在学习到Form表单验证的时候，发现一个问题，来这里吐个槽，看看大家有没有遇到这样的问题。

问题的起因是，Antdv表单项间距特别高，我想他这是为了可以放错误提示信息，不仅官方文档这样写，提供的pro框架也是这样的，参考了很多的第三方框架也是遵循官方的提示样式，可能大家都觉得这样挺好的，表单项下放置错误提示信息。

凡事总有个但是，但是我觉得这样不好，间距太高了，提示信息太占位置了，页面比较紧凑时，更是让人难以接受，于是，我想改一下这个显示方式，使用 鼠标悬停气泡显示错误提示信息。

表单项验证错误时，显示红框，并在后面显示红色的X，再辅助鼠标悬停气泡提示，这样就能够适应绝大多数场景。

毕竟是学习框架，看着文档发现了这个form事件validate，在每个表单项被验证后会触发事件，我就真的写了，但是他竟然不生效

我本地不生效，然后还特地写了最小验证环境  CodeSandBox  ，提交到了官方github

不过，总不能这个事件不生效，就放弃了，如果这是项目要求，总得想办法实现的。经过一天的奋战，总算解决了。

解决思路如下：

1、借用验证规则中的自定义验证，所有的规则，不管是用户自定义的验证规则，还是使用已定义的，我都再进行一层包装，包装内，自己调用验证

2、css调整表单项间距

3、悬浮气泡提示信息，借用第三方提供的（tippy.js），由于antdv并没有提供方法调用方式的tooltip

最终实现效果如下：

 核心代码如下：

  1 
 67 
283 
284 

最小环境校验

官方文档Form有这么一个事件，validate,任一表单项被校验后触发