vue混入element ui全局追加表单验证规则

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

 

全局混入

使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

 


// 混入全局验证
Vue.mixin({
  created: function () {
    // 统一追加验证规则,全空格验证不通过
    if (this.$data && this.$data.rules) {
      for (let o in this.$data.rules) {
        let rule = { pattern: /(\S)/, message: '此项不能为空', trigger: 'blur' }
        this.$data.rules[o].push(rule);
      }
    }
  }
})