vue+elementui项目封装form表单公共正则验证

前期准备：在项目下创建一个工具包文件夹util，文件夹下创建一个formValidation.js文件

1、formValidation.js 文件

let tel = /^1(3|4|5|7|8|9)\d{9}$/; //手机号码
let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名

let FormValidate = (function() {
  function FormValidate() {}
  FormValidate.Form = function() {  // From表单验证规则，可用于公用的校验部分
    return {
      // 电话号码的验证
      Tel: (rule, value, callback) => {
        if (!value) {
          return callback(new Error('联系电话不能为空！'))
        }
        if (!tel.test(value)) {
          callback(new Error('手机号码有误，请重新填写！'))
        } else {
          callback()
        }
      },
      
    }
  }

  // FromOne表单验证规则  用于FromOne个性化的校验
  FormValidate.FormOne = function() {
    return {
      // 姓名的验证规则
      Name: function(rule, value, callback) {
        if (!value) {
          return callback(new Error('姓名不能为空'))
        }
        if (!name.test(value)) {
          callback(new Error('请输入正确姓名!'))
        } else {
          callback()
        }
      }
    }
  }

  return FormValidate
}())
exports.FormValidate = FormValidate

  return FormValidate
}())

exports.FormValidate = FormValidate

2、在src下的 main.js 入口文件注册全局组件

import fromCommon from "../util/fromCommon.js" // 1、导入文件

Vue.prototype.$fromCommon = fromCommon;       //  2、注册成全局验证

3、使用

addRules: {
   tgeiContactPhone: [{
     required: true,
     validator: this.$fromCommon.FormValidate.Form().Tel,
     trigger: 'blur'
   }],
}