html表单可以不写lable,elementui不写rule来验证表单

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

{

name: [

{ required: true, message: '请输入活动名称', trigger: 'blur' },

],

region: [

{ required: true, message: '请选择活动区域', trigger: 'change' }

],

}

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

name is required

唉， 不得不想出点脑瓜仁方便方便了。

二话不说，

我包装了下el-form, 看下:

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);

}

}

};

这么用:

当然这个base-form还可以随便加定好的属性，你看:

/**

* 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();

}

}

};

你只要这么使用:

邮箱验证就加上去啦！

当当当然，阔以叠加

ohohohohohohohoh!!

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