elementui关于表单校验validator

表单字段自由组合校验规则，避免重复书写相同规则，参照代码如下：

<template>
  <!-- 表单对话框 -->
  <ft-dialog v-el-drag-dialog :title="formTitle" width="800px" :visible.sync="dialogVisible" @confirm="handleSubmit">
    <el-form ref="dataFormAddUpdate" :model="formEntity" :rules="validateRules" label-position="left"
      label-width="100px" label-suffix=":">
      <el-form-item label="模板编码" prop="TemplateCode" :rules="validateRules.NotEmpty">
        <el-input v-model="formEntity.TemplateCode" autocomplete="off" :disabled="codeDisable" />
      </el-form-item>
      <el-form-item label="模板描述" prop="TemplateDesc" :rules="[validateRules.NotEmpty,validateRules.Min0Max5]">
        <el-input v-model="formEntity.TemplateDesc" autocomplete="off" />
      </el-form-item>
      <el-form-item label="模板文件" prop="TemplateFile" :rules="validateRules.NotEmpty">
        <el-input v-model="formEntity.TemplateFile" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" prop="Remark">
        <el-input v-model="formEntity.Remark" :autosize="{ minRows: 3, maxRows: 5 }" type="textarea" />
      </el-form-item>
    </el-form>
  </ft-dialog>
</template>

<script>
import { add, update } from '@/api/Sys/Sys_PrintTemplate'
export default {
  name: 'Sys.Sys_PrintTemplate.addUpdate',
  data() {
    return {
      dialogVisible: false,
      formEntity: {
        RowUid: '',
        RoleCode: '',
        UserDesc: '',
        Remark: ''
      },
      validateRules: {
        NotEmpty: { required: true, message: '必须输入!', trigger: 'blur' },
        Min0Max5: { min: 0, max: 5, message: '长度在 0 到 5 个字符', trigger: 'blur' }
      }
    }
  },
  computed: {
    mode: function () {
      const entityKey = this.formEntity.RowUid
      return entityKey === undefined || entityKey === null || entityKey === '' ? 'Add' : 'Update'
    },
    codeDisable: function () {
      return this.mode === 'Update'
    },
    formTitle: function () {
      return this.mode === 'Add' ? '添加' : '编辑'
    }
  },
  methods: {
    show: function (entity) {
      // 注意本处写法，更新显示dialogVisible =true，然后nextTick中调用resetFields

      this.dialogVisible = true
      // console.log(this.formEntity,this.$options.data(), 'formEntity')
      if (undefined !== entity && entity !== null) {
        // console.log(entity,entity===null,'entity')
        this.formEntity = Object.assign({}, entity)
      } else {
        this.formEntity = this.$options.data().formEntity
      }
      // this.$nextTick(() => {
      //   // 注意visibile属性为true设置后才可以获取到$refs
      //   this.$refs.dataFormAddUpdate.resetFields()
      //   if (undefined !== entity && entity !== null) {
      //     const entityCopy = Object.assign({}, entity)
      //     this.formEntity = entityCopy
      //   }
      // })
    },
    hide: function () {
      this.dialogVisible = false
    },
    handleSubmit() {
      const action = this.mode === 'Add' ? add(this.formEntity) : update(this.formEntity)
      this.doSubmit(action)
    },
    doSubmit(submitAction) {
      this.$refs.dataFormAddUpdate
        .validate()
        .then(() => {
          console.log(submitAction, typeof submitAction, 'dddddddddf')
          submitAction.then(result => {
            this.dialogVisible = false
            console.log(this.dialogVisible, 'hide')
            this.$emit('confirm')
          })
        })
        .catch(error => {
          console.log('failed', error)
          this.$emit('cancel', error)
        })
    }
  }
}
</script>

<style scoped></style>