置信很多人都有过这样的代码

{  name: [    { required: true, message: '请输出流动名称', trigger: 'blur' },  ],  region: [    { required: true, message: '请抉择流动区域', trigger: 'change' }  ],}

额滴恶瓜脑膜炎上帝啊， 这是要坐实我搬砖皇帝的身份么，一个required要我写这么多代码？ 我就一个必填， 你默认给我整个英文，还是

name is required

唉， 不得不想出点脑瓜仁不便不便了。
二话不说，
我包装了下el-form, 看下:

<template>  <el-form ref="form" v-bind="$attrs" :rules="defaultRules" size="small">    <slot></slot>  </el-form></template><script>import validator from "./validator";/** * Basic Form Components */export default {  inheritAttrs: false,  data() {    return {      defaultRules: {}, // Default configuration made by interception      validateList: [],    };  },  created() {    // 读取规定列表    this.readRuleList();    const arr = this.$slots.default.map(v => ({      ...v.componentOptions.propsData,      ...v.data.attrs    }));    arr.forEach(v => {      if (Object.prototype.hasOwnProperty.call(v, "required")) {        if (!this.defaultRules[v.prop]) {          this.$set(this.defaultRules, v.prop, []);        }        this.defaultRules[v.prop].push({          required: true,          message: `${v.label}不能为空`, // 重点这句          trigger: "blur"        });      }      this.validateList.forEach(val => {        if (Object.prototype.hasOwnProperty.call(v, val)) {          if (!this.defaultRules[v.prop]) {            this.$set(this.defaultRules, v.prop, []);          }          this.defaultRules[v.prop].push({            validator: validator[val](this),            trigger: "blur"          });        }      });    });  },  methods: {    validate(fn) {      return this.$refs.form.validate(fn);    },    reset() {      this.$refs.form.resetFields();    },    readRuleList() {      this.validateList = Object.keys(require("./validator/index").default);    }  }};</script>

这么用:

 <base-form>    <el-form-item prop="title" label="题目" required>              <el-input v-model="addForm.title"></el-input>            </el-form-item> </base-form>
就只有在form-item上写个 required! message默认就是题目不能为空

当然这个base-form还能够轻易加定好的属性，你看:

validator.js
/** * Verifier */export default {  mobile: () => (rule, value, callback) => {    if (!/^1[0-9]{10}$/.test(value)) {      callback(new Error("手机号码谬误"));    } else {      callback();    }  },  email: () => (rule, value, callback) => {    if (!/[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {      callback(new Error("电子邮箱格局谬误"));    } else {      callback();    }  }};

你只有这么应用:

<base-form>    <el-form-item prop="title" label="题目" email>              <el-input v-model="addForm.title"></el-input>            </el-form-item> </base-form>

邮箱验证就加上去啦！

当当当然，阔以叠加

<base-form>    <el-form-item prop="title" label="题目" email required>              <el-input v-model="addForm.title"></el-input>            </el-form-item> </base-form>

ohohohohohohohoh!!

当当当当当当然， base-form是不会冲掉本来el-form的属性的， 这么炫炫的组件不copy试试吗？