elementUI 不用在写rule来做表单校验啦

相信不少人都有过这样的代码

{
  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试试吗？