记一次坑爹的 form 校验

需求很简单，就是增加一个自定义的 form 校验。 由于组件是多级封装，emit 了几次之后，调用父组件的校验，组件本身交互的效果就出来了。

但是表单提交还需要整体校验一次，问题就来了。 当输入不符合要求的时候，可以正常校验之后提示错误。但是！！表单所有输入都符合要求之后，反而无法进入 form.validate 方法。就很玄乎

因为组件是封装嵌套很多层，所以这块逻辑原来的开发写的很复杂，加上层层调用的系统方法，也没时间细看了。

一般自定义校验，直接 rules 里面用 validator 传入方法就可以了，但这里原来的 rules 是通过配置自动生成的。 于是通过获取到组件的 prop ，然后手动 push 到表单对应组件的校验逻辑里: this.rules[prop].push({

 validator:(value,callback)=>{
      if(value){
          callback(....)
      }
 },
 trigger:"change"

})

调用 validate 之前 打印了一下，不知为何 trigger 数据丢失显示为 null，原因暂时不明，但其实不影响功能。导致我一直在排查是不是不符合提交表单的方法本身的校验规则。

最后抱着死马当活马医的心态，直接上网再查一下，发现需要处理两个地方的 callback

这里重点来了，

【validator 里面如果有 if 那么 else 即使本身没有特殊处理，也必须要返回一个空的 callback()】，

所以上面的代码补上这部分就好了

网上也有人遇到其他问题导致的，所以一开始并没有找到这个原因

总结就是自己菜！表单校验写了很多次但是都没有特意去学习，其实代码校验也是开发过程中很重要的一部分。