关于element表单验证的问题

Question

表单是根据后台的给的数据循环遍历出来,表单类型也不一样的如代码：

<el-form :inline="true" :model="formInline" :rules="rules" >
  <el-form-item v-for="list in data" :key="list.dataIndex" :label="list.text" :prop="list.datdIndex">
    <el-input if="list.dataIndex !='tiem'"  v-model="formInline[list.dataIndex]"></el-input>
    <el-date-picker
                          v-if="list.dataIndex == 'time'"      
                          v-model="formInline[data.dataIndex]"
                          type="date"
                          placeholder="选择日期">
   </el-date-picker>
  </el-form-item>
</el-form>

vue中定义rules

data(){
    return {
        rules:{
                  name: [
                    { required: true, message: '不可为空', trigger: 'blur' },
                  ]
                },
    }
}

我的问题是，很多页面都需要用这个验证，都是重复的，我想问一下，有没有什么方法，不用每个页面都写一遍rules，还有就是好多表格的验证规则是一样的，能不能写成一个，大家都用

Answer 1

当然可以。
创建一个rules.js文件

export const rules = {
        name: [
            { required: true, message: '不可为空', trigger: 'blur' },
              ]
          }

调用的js直接import进来就好了。

import {rules} from './rules.js';

Answer 2

可以。

把 el-form 封装成一个自定义组件，比如叫做 CustomForm.vue.
里面设计好各个 el-form-item（比如 el-input，el-select 等等），以及你要的 rules。

这样就可以只写一次。
各页面如需使用 el-form，直接引用这个组件就好，通过 prop 传入数据.

Answer 3

逻辑简单是验证可以提出来，但是逻辑复杂的验证，最好还是别提成公共的