素材牛VIP会员
关于element表单验证的问题
 雷***y  分类:JavaScript  人气:911  回帖:3  发布于6年前 收藏

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

<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,还有就是好多表格的验证规则是一样的,能不能写成一个,大家都用

讨论这个帖子(3)垃圾回帖将一律封号处理……

Lv6 码匠
郑***6 页面重构设计 6年前#1

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

Lv4 码徒
逆***团 Linux系统工程师 6年前#2

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

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

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

import {rules} from './rules.js';
Lv6 码匠
阿***6 Linux系统工程师 6年前#3

可以。

el-form 封装成一个自定义组件,比如叫做 CustomForm.vue.
里面设计好各个 el-form-item(比如 el-inputel-select 等等),以及你要的 rules

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取