element源码form学习

755 阅读2分钟

1.初始化生命周期created里绑定el.form.addField事件,将需要校验的formItem放入data中的fileds中,在formItem的mounted里调用;

2.初始化生命周期created里绑定el.form.removeField事件,当某项formItem不存在时,删除数组fields中对应的项,在formItem的beforeDestroy中调用;

3.resetFields(),对整个表单进行重置,将所有字段值重置为初始值并移除校验结果;如下图所示,如果form没有绑定数据,则返回错误提示,否则调用对应项formItem的resetFields()方法;


4.clearValidate(); 移除表单项的校验结果,传入参数,移除对应参数的校验结果,参数为formItem对应的prop属性,不传参数移除全部的对应校验结果;先通过判断得到需要移除的表单校验结果,再调用对应项的formItem的clearValidate()方法


5.validate(),对整个表单进行校验;传入回调函数,校验完成执行回调函数,传入其他参数或者不传入,则返回promise; j进入到validate()函数中,如下图所示:首先是如果form没有绑定数据,则返回错误提示,接下来如果传入的参数不是函数,则调用window.Promise,将callback变成一个函数,如果没有需要验证的formItem,返回callback(true);如果有需要验证的formItem,则循环调用对应formItem的validate()方法,将未通过校验的项放入invalidFields对象中,当所有项的验证都完成后,调用callback函数,将验证结果和验证未通过的项放入回调函数中。如果传入的参数不是函数,则将返回promise函数,参数为验证结果,不包含未通过验证的项。


6.validateField(),对部分表单字段进行校验的方法。如下图所示,从全部校验项中筛选出传入的需要校验的项,如果没有,则返回错误提示;如果校验项存在,则遍历调用对应项的validate方法,每一个校验项都会调用对应的cb方法;