Vue插件+element-ui写form自定义验证规则

自定义验证规则 element-ui+vue插件的方式（vue.use）

1. vue rules 代码，this.validateForm()为插件函数

  rules: {
    
    
        phone: this.valiateForm({
    
    
          required: true,
          trigger: "blur,change",
          validator: function (rule, value, callback) {
    
    
            console.log(value);
          },
        }),
      },

2. 插件代码 validate.js ,根据自己的需要进行代码的修改优化

// 开发vue 插件的一种标准写法 exports.install 是一种语法糖

/**
	也可以写成
    const  install=function(Vue,options){}
    export default install
    
    main.js 
    Vue.use(插件名称)

**/


exports.install = function(Vue, options) {
    
      
  // 定义一个验证规则函数
  Vue.prototype.valiateForm = function(opt) {
    
    
    let rules = new Array();
    // 如果不填trigger ，则默认blur
    let trigger = (opt.trigger || 'blur').split(',');

    if (opt.required) {
    
    
      rules.push({
    
     required: true, message: '该输入项为必填项', trigger });
    }

    // tips： 如果dataType为 number，需要在v-model上添加修饰符 .number
    // dataType :number| string| url| enum|等等
    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;
  };
};

3. main.js里面引入这个文件，然后vue.use进行使用

import validate from './utils/validate';
Vue.use(validate);