element-ui 的 el-form 组件，和 vue-formulate 都是表单组件，用来做表单数据统一处理，而且做表单验证的，现在就两者的区别做一些分享。

首先，我们看下 el-form 组件实现表单验证的一个官方实例：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <!-- 省略部分代码 -->
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <!-- 省略部分代码 -->
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script> export default { data() { return { ruleForm: { region: '', }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>

在这个代码中，拿表单中的一个 region 字段做举例说明，该字段在代码中，重复了多次，el-form 的 model 属性中，要声明一次，在 el-form 的 rules 属性中也要声明一次，在第二个 el-form-item 的 prop 中也要声明一次，而且在 el-select 的 v-model 中还要绑定一次，表单里的同一个字段，需要在模板中重复了四次，在 script 中用了两次，这样在开发的过程中很容易出现问题。试想一下，假如后端兄弟说要改一个字段的名，你可能需要修改六个地方，在修改的过程中，难免有遗漏的地方。

作者也是受够了这个问题，然后就在 google 中搜到了一个解决这个问题的神器 — vue-formulate。让我们看看这个库怎么解决这个问题的

<template>
    <FormulateForm v-model="formValues" @submit="submitHandler" >
      <FormulateInput name="name" label="What is your name?" validation="required" />
      <FormulateInput name="age" label="How old are you?" validation="required|number|max:120" />
      <FormulateInput type="submit" label="Sign up" />
    </FormulateForm>
</template>
<script> export default{ data(){ return { formValues:{ name:'', age:'', } } }, methods:{ submitHandler(){ // 该函数只处理表单提交即可，不需要再进行一次表单校验操作 console.log('提交表单') } } } </script>

在这个代码中，我们可以发现，表单中的字段没用任何重复啰嗦现象，每个引用字段的地方，每个字段都有独特的验证机制，当然了，每个字段都可以自定义验证规则，自定义验证错误语句

最后

国内可以访问的 vueformulate 文档，请 查看

最开始写这篇文章的时候，我是刚发现这个包，经过几天的努力，已经给 vueformulate 加了一个扩展，用来统一 element-ui 的风格 —- formulate-el-ui , 欢迎大家踊跃的提 issue 和 pr

原文作者：tu6ge-php 转自链接：learnku.com/vuejs/t/581…