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

矫情吗；* 2021-07-25 23:07 795阅读 0赞

> 前期准备：在项目下创建一个工具包文件夹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'
       }],
    }