elementui校验踩坑

问题

1. 数据变动时validator函数不触发
2. callback返回消息不显示

解决

可能造成问题一的五个原因

1. el-form-item中保持单个表单元素，多个可能造成混淆
2. el-form-item的prop，其内元素绑定modal值，rule里的prop同名校验规则，这三个数据应该同名，并且前两个数据应该对应同一个数据源
3. 使用经过包裹的自定义组件时应另加处理，el-form-item上绑定的规则只能监听其下一级元素，不能监听下下级
4. tigger错误，其值为blur/change，而在某些选择器中，例如select的多选情况，blur无法触发变化，需要使用change
5. 被校验的数据是数组或对象，他们内部的变化不一定能被监听到，此时需要使用深层校验deep rules ，这是element采用的外部库async-validator里的配置。（详细用法见ElementUI学习之-rules详解）

可能造成问题二的两个原因

1. callback多了或少了，每个程序出口都需要一个callback，比如if里有，else里面也需要，并且只能是一个，不能是多个
2. el-form-item内某一级设置了溢出隐藏，（我的就是这个，接手别人的代码总会有出乎意料的情况），触发出现的error提示会有名为el-form-item__error的class，你可以在页面上检索一下，看它是否已经出现，提示是一个表单元素下的小div

ElementUI学习之-rules详解

Element Plas Form表单

async-validator文档中文翻译