标签：opt 插件 Vue 自定义 vue rules trigger

自定义验证规则 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);

标签：opt,插件,Vue,自定义,vue,rules,trigger
来源： https://blog.csdn.net/weixin_45356397/article/details/121874138

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。