鍍金池/ 問答/HTML/ 關(guān)于element表單驗(yàn)證的問題

關(guān)于element表單驗(yàn)證的問題

表單是根據(jù)后臺(tái)的給的數(shù)據(jù)循環(huán)遍歷出來,表單類型也不一樣的如代碼：

<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' },
                  ]
                },
    }
}

我的問題是，很多頁面都需要用這個(gè)驗(yàn)證，都是重復(fù)的，我想問一下，有沒有什么方法，不用每個(gè)頁面都寫一遍rules，還有就是好多表格的驗(yàn)證規(guī)則是一樣的，能不能寫成一個(gè)，大家都用

回答
編輯回答
挽青絲

可以。

把 el-form 封裝成一個(gè)自定義組件，比如叫做 CustomForm.vue.
里面設(shè)計(jì)好各個(gè) el-form-item（比如 el-input，el-select 等等），以及你要的 rules。

這樣就可以只寫一次。
各頁面如需使用 el-form，直接引用這個(gè)組件就好，通過 prop 傳入數(shù)據(jù).

2017年6月13日 15:09
編輯回答
詆毀你

當(dāng)然可以。
創(chuàng)建一個(gè)rules.js文件

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

調(diào)用的js直接import進(jìn)來就好了。

import {rules} from './rules.js';
2017年12月21日 20:01
編輯回答
執(zhí)念

邏輯簡單是驗(yàn)證可以提出來，但是邏輯復(fù)雜的驗(yàn)證，最好還是別提成公共的

2017年9月21日 04:07