element 动态表单加自定义校验

<template>
  <div class="dashboard-container">
    <!-- <component :is="currentRole" /> -->
    <el-form
      ref="dynamicValidateForm"
      :model="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
      :rules="dynamicValidateForm.rules"
    >
      <el-form-item
        v-for="(item, index) in dynamicValidateForm.form"
        :key="item.prop"
        :label="item.labelName"
        :prop="`form.${index}.${item.prop}`"
        :rules="item.rule && item.rule()"
      >
        <el-input v-model="item[item.key]" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('dynamicValidateForm')"
        >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import adminDashboard from './admin'
// import editorDashboard from './editor'

export default {
  name: 'Dashboard',
  // components: { adminDashboard, editorDashboard },
  data() {
    return {
      currentRole: 'adminDashboard',
      dynamicValidateForm: {
        form: [
          {
            id: '',
            prop: 'id',
            labelName: '手机号码',
            rule() {
              return {
                required: true,
                validator(rule, value, callback) {
                  if (value === '') {
                    callback(new Error('请输入手机号'))
                  } else if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
                    callback()
                  } else {
                    callback(new Error('手机号码格式不正确'))
                  }
                },
                trigger: 'blur'
              }
            }
          },
          {
            age: '',
            prop: 'age',
            labelName: '年龄'
          },
          {
            name: '',
            prop: 'name',
            labelName: '姓名',
            rule() {
              return {
                required: true,
                trigger: 'blur'
              }
            }
          },
          {
            card: '',
            prop: 'card',
            labelName: '卡号',
            rule() {
              return {
                required: true,
                trigger: 'blur',
                message: '请输入卡号'
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        const obj = Object.create(null)
        if (valid) {
          this.dynamicValidateForm.form.forEach((item) => {
            obj[item.prop] = item[item.prop]
          })
          console.log(obj)
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>