自定义验证规则 element-ui+vue插件的方式(vue.use)
- vue rules 代码,this.validateForm()为插件函数
rules: {
phone: this.valiateForm({
required: true,
trigger: "blur,change",
validator: function (rule, value, callback) {
console.log(value);
},
}),
},
- 插件代码 validate.js ,根据自己的需要进行代码的修改优化
exports.install = function(Vue, options) {
Vue.prototype.valiateForm = function(opt) {
let rules = new Array();
let trigger = (opt.trigger || 'blur').split(',');
if (opt.required) {
rules.push({
required: true, message: '该输入项为必填项', trigger });
}
if (opt.dataType) {
rules.push({
type: opt.type, message: '输入类型错入,请重新输入', trigger });
}
if (opt.max) {
rules.push({
min: 1, max: opt.max, message: `长度在${
1}-${
opt.max}之间`, trigger });
}
if (opt.pattern) {
rules.push({
pattern: opt.pattern, message: '不符合格式,请查看后重新输入', trigger });
}
if (opt.validator) {
rules.push({
validator: opt.validator, trigger });
}
return rules;
};
};
- main.js里面引入这个文件,然后vue.use进行使用
import validate from './utils/validate';
Vue.use(validate);