表单时大家常用的，根据本站的百度统计后台显示来到道招网的程序很多都在关注《element-ui动态表单async-validate校验 please transfer a valid prop path to form item!》

看来很多网友对element-ui的校验(或者说是async-validator)使用不太熟悉，想了想还是有必要分享下element-ui的表单校验机制的。

首先表单校验分el-form, el-form-item以及里面的el-input, el-select等。

这里就以el-form, el-form-item和el-input组合为例。为了讲的更加详细，决定分一个系列来讲。毕竟码字多了就想草草结束。。。

先直接看el-form吧，这里的代码很少，毕竟主要内容是以slot插入的。

复制代码

属性就不多说了，跟校验相关的就是model和rules。还有就是validateOnRuleChange，它默认是true，并且有这样的watch存在

watch: {

rules() {

if (this.validateOnRuleChange) {

this.validate(() => {});

}

}

},

复制代码

默认规则改变会实时校验表单哦。

// 表单校验源码

validate(callback) {

if (!this.model) {

console.warn('[Element Warn][Form]model is required for validate to work!');

<