相信很多正在用 element-ui 组件的同学，都会用到过 el-form 表单组件，这个组件帮助我们完成了表单验证和表单提交功能，但是在用的时候，会发现一些不方便的地方，比如说验证规则无法方便地复用。

关于无法方便地复用

比如说我的表单需要一个手机号格式验证规则，如果我在一个页面里面使用了，我就在这个页面里面复制一遍这个规则，这个还好，但是如果我在项目中的另外一个页面中，还要用到这个规则，还要复制一遍，这就让人有些不开心了。而且接下来我要说的这个新包，他很好的解决了这个问题，你可以很方便的把自己的验证规则复用到很多页面，甚至很多项目中

还有就是设定规则比较复杂，我们要使用一个规则的时候，不仅需要在 el-form 组件上设置 rules, model 以及 ref 等属性，还要在 el-form-item 上设置 prop ，而且这里面有些是重复定义的变量，完全有优化和提升的空间。

新的选择

最近一段时间，在 Google 上找到了这么一款表单验证组件，初步试用下来，发现方便了很多，我们都知道，表单验证功能表单以及表单域的关联比较紧密，需要考虑数据的双向互通，以及错误数据的展示，要在已有的 element-ui 项目中，接入一个其他的项目来做，是很困难的，但是这款产品就简化了这个问题，因为 VueFormulate 是支持插件扩展的，首先它内置了一些比较漂亮的表单域，直接放在项目中也是没问题的，另外它还可以扩展使用其他的表单域，比如说 element-ui 中的文本输入框，数字输入框，级联选择器等等。

更多内容，可以查看 VueFormulate 的 中文文档 ，最近这段时间刚刚翻译的。

融合 element-ui 和 VueFormulate

因为我们的项目就是用的 element-ui 开发的，为了保持风格统一，还要用到 VueFormulate 就需要这样的一个插件，所以我就开源了这样一个插件 formulat-el-ui，为了减少大家的使用困难，这个插件是遵循语义化版本2.0 规范的。项目 github 地址 ,如果无法访问，可以查看 gitee