vue校验规则封装

定义一validate.js文件内容如下：
 

validate.js封装部分
const rules = {
    email: {
        ex: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
        msg: '请输入正确的email地址'
    },
    mobile: {
        ex: /^1[0-9]{10}$/,
        msg: '请输入正确的手机号'
  }
    ....此还可添加的其他的校验方法
}

const compareFn= (rule, value, callback) => {
  if (parseInt(value) > 255) {
    return callback(new Error('值不可以大于5'))
  } else {
    callback()
  }
}，
....此还可添加的其他的封装方法

const Validator = {
  rules,
  compareFn
}

export default {
  install: function(Vue, Option) {
    Object.defineProperty(Vue.prototype, '$valid', { value: Validator })
  }
}

xxx.vue文件使用方法：

//标签部分：
        <el-form-item label="手机号：" required prop="phone">
          <el-input v-model="addFormData.phone"></el-input>
        </el-form-item>

        <el-form-item label="邮箱：" required prop="email">
          <el-input v-model="addFormData.email"></el-input>
        </el-form-item>


//验证规则：
rules: {
     phone: [
         { required: true, message: '请输入手机号' },
         { pattern: this.$valid.rules.mobile.ex, message: '手机号格式错误' }
     ],

     email: [
          { required: true, message: '请输入邮箱' },
          { pattern: this.$valid.rules.email.ex, message: '邮箱格式错误' }
     ]
}

重点：：①、标签传入校验规则；②、this.$valid.rules在规则定义里面调用具体的规则