如何封装一个带表单验证的 Vue的表单插件（二）：功能开发

接下来，我们开始完整的功能开发

目录结构

整体目录结构如上图所示

• src/components 项目的业务组件/页面
• src/base form表单组件
• src/mixins 混入相关的内容放在这个文件夹（dispatch、capture方法）

form表单之 input组件

首先我们先看看input.vue文件的内容：

form-item组件是表单验证的核心组件，功能相对来说比较复杂，我们慢慢看：

1. props定义了 label(输入框前面的文字定义) prop(用于匹配rules规则和输入框值的属性名)。
2. inject 接受form组件的实例(provide/inject)，因为form-item需要使用用户在外面定义的校验规则和表单的值。
3. data中定义了四个属性：- currentValue 当前表单元素的value值，在data中缓存；- isRequired 是否必填，用于控制必填的样式（可有可无）；- validateState 表单的验证状态 验证失败为‘error’；- ValidateMessage 表单验证的错误信息，验证通过信息为空。
4. 因为此表单验证支持一键全部校验，所以我们要将当前的form-item实例缓存到form组件中（mounted生命周期），以便于统一操作，然后再组件卸载的时候（destroyed）将组件卸载，所以我们使用 dispatch方法将其分别暴露给form监听。
5. 当form-item加载成功之后，我们通过prop判断当前form-tem是否需要验证；为true时 继续往下执行，监听从input.vue中的事件this.$on('on-input-blur', this.listenBlur)。回调中再次调用表单验证方法 validate()；
6. validate方法接受两个参数，trigger(过滤符合校验条件的校验规则) callback(回调函数)。通过两个方法getRules() 、getFilterRules()方法获取当前form-item组件当前事件校验的rules。设置validateState校验状态为 validating ；然后调用async-validator的方法开始验证。如果errors存在，则将validateState赋值 error，validateMessage为报错的文字提示。

form表单之 form组件

form-item组件的功能需要结合form.vue才能更好的理解：

form.vue主要就是传递用户设置的校验规则和表单双向数据绑定的值并 提供一键校验所有表单元素功能的组件；内容分析:

• props中的两个属性分别为 整个表单的校验规则集合rules 和整个表单值的对象集合modes。
• 因为Vue组件渲染机制的原因，form-item中的mounted会优先于父级的mounted渲染，所以在form-item 的mounted中暴露给form的实例只能在created中监听~~
• methods中定义resetFields() 一键重置（一般form表单中不一定有一键重置检验信息该功能，在此不详细描述）；validateAll()方法就是一键全部校验；会返回一个Promise实例，方法内部做了两种处理，兼容callback回调的方式和then()的方式处理返回值。

到此，我们整个form基础组件也就开发完了，我们现在找个demo引用实践一下

整个demo很简单，两个输入框一个按钮，检验触发事件是blur（form-item.vue暂时只响应blur）
data中validateRules就是 async-validator需要的验证规则格式。
当我们对每个输入框失去焦点，响应的输入框校验就触发了，当我们点击按钮，就触发了全部校验。

总结

这个form表单组件以及封装完成，描述的可能比较跳跃，我简单的画了一个思维导图便于对比理解~

这个表单组件只包含了输入框，还有其他的表单元素并没有加入，另外也不支持自定义校验，我们在下一章节继续分析。

备注

源码地址： https://github.com/wangyangsea/wy-validate

参考文章

Vue.js 组件精讲