表单校验的思考——校验信息为什么没有消失常常接触表单工具，遇到一个场景：表单提交中，需要对附件信息进行校验，触发校验之后

常常接触表单工具，遇到一个场景：表单提交中，需要对附件信息进行校验，触发校验之后，上传文件成功，校验信息不会消失。

对于平常的输入框或者输入框一旦数值改变或者失焦之后，就会触发校验信息。

1、在el-form-item.vue中，mounted生命钩子函数中执行了addValidateEvents, 可以看出这里监听了change和blur事件，对应执行力 validate检验的方法

2、那既然设置了监听，那优先到el-input中看看是否有发射对应事件在el-input中不仅触发了change、blur，同时还触发了对应的el.form.blur 和el.form.change事件

让我们同时了解一下 dispatch是怎么样执行的？

可以看到dispatch函数接受三个传参：组件名、自定义|事件名、数据。函数中会不断的往上获取父级，对比获取的父级组件名是否与目标组件名一致，当一致时通过获取的实例执行对应的 $emit事件，触发$ on事件，也就是执行el-form-item中的$on事件。

3、回过头来看看那为什么el-upload没有触发校验呢？大致原因也能猜测出来，在我们查阅el-upload代码中，当数据发生变化时，没有对应的this.dispatch('ElFormItem',xx,xx)事件。

因此真相大白。

了解原理之后有什么解决方式呢？

1、在el-form-item中添加有this.dispatch事件的组件。

2、手动在数据变更的change或blur，以及watch监听数值中手动触发表单的校验事件

`this.$refs.xxx.validateField('xxx')`

对于表单的校验,会根据对应挂载的prop获取表单对象进行校验，所以要注意prop挂载的名称，对于复杂多层的表格校验，需要注意凭借好对应的路径，如xx[x].xx.xx。

如果jym有更好的解决方式和建议欢迎告知哦