ElementUI是怎么做表单验证的？
Element的表单中包含三个组件：Form、FormItem和Input
Input组件使用v-model绑定value的变化，组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，这是默认情况下的。其实value和input这两个名字是可以修改的。
FormItem组件的作用是包裹input等具体输入组件，所以我们肯定知道要使用slot插，它需要传入两个 prop，一个是label，作用显而易见是标签文本，另外一个是prop，它的作用是用来做验证的。
Form组件首先不用考虑的就是Form里肯定有插槽，然后它需要传入model，这是表单数据对象，还要传入rules，这个是表单验证规则。
表单验证功能是放在FormItem组件里的，Element中表单验证用到了第三方插件 async-validator，在FormItem中获取 rules 和 model，那么问题又来了，rules和 model是传入到Form中的，怎么才能在FormItem中获取Form中的数据呢？你可能会想为什么不直接将这两个值传入到FormItem中呢？试想下真要这样的话，那每一个FormItem都要重复传入这两个对象，代码一下子臃肿起来，对性能也造成一定影响。所以还是要相信Element的设计思想，按照现有的来。在Element中解决这个问题的方法就是使用provide / inject。provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。input输入时，使 FormItem 自身触发 validate 事件，FormItem 监听自身触发的 validate 方法，进行验证逻辑
这样就完成了一个实现了一个简易表单
ElementUI做表单验证时在循环里对每个input验证怎么做呢？
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
