集中管理正则

我正在参加「掘金·启航计划」

在项目中，特别是后台管理项目中我们需要很多正则的校验，如果每个页面一个个的写，对于我来说很不爽

如果集中管理那岂不是更好？

我习惯在src下面建一个until文件夹，里面建一个reg.js文件，放置正则：

//邮箱const emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$///手机const mobileRegex = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ export default {    mobileRegex : mobileRegex}

然后在页面引入：

import reg from './utils/reg.js';//如下使用reg.mobileRegex.test(13636663662)

但是我们常常是配合UI库使用的，都到这里的，如果直接集成成一个个的方法直接调用岂不是更好呢？

//判断是否为空function checkNull(val){    return val!=undefined && val!=null} //获取校验规则function getrRegex(min, max, regex, msg, extend) {    let list = [        {            pattern: regex,            message: msg,            trigger: "blur",        }    ]    if (checkNull(min) || checkNull(max)) {        list.push({            validator: (rules, value, callback) => {                if (checkNull(max) && value > max) {                    return callback(new Error("超出范围"));                } else if (checkNull(min) && value < min) {                    return callback(new Error("超出范围"));                } else {                    return callback();                }            }, trigger: "blur"        })    }    if (typeof extend === "object") {        extend.forEach(e => {            list.push(e)        });    }    return list;} //是否必填function addQuired(list,required,msg){    if (typeof required == Boolean || required) {        msg = msg == undefined ? '' : msg        let obj = { required: true, message: msg, trigger: "blur" }        list.unshift(obj)    }}

完整代码：

//邮箱const emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$///手机const mobileRegex = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$///电话号码const telephoneRegex = /^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$/ function getrRegex(min, max, regex, msg, extend) {    let list = [        {            pattern: regex,            message: msg,            trigger: "blur",        }    ]    if (checkNull(min) || checkNull(max)) {        list.push({            validator: (rules, value, callback) => {                if (checkNull(max) && value > max) {                    return callback(new Error("超出范围"));                } else if (checkNull(min) && value < min) {                    return callback(new Error("超出范围"));                } else {                    return callback();                }            }, trigger: "blur"        })    }    if (typeof extend === "object") {        extend.forEach(e => {            list.push(e)        });    }    return list;}function addQuired(list,required,msg){    if (typeof required == Boolean || required) {        msg = msg == undefined ? '' : msg        let obj = { required: true, message: msg, trigger: "blur" }        list.unshift(obj)    }}    function mobile(required, msg, extend) {    let list = getrRegex(null, null, mobileRegex, "请输入正确的电话号码", extend)    addQuired(list,required,msg)    return list} export default {    mobile: function (required, msg, extend) {        return mobile(required, msg, extend);    }}

vue2全局引入还是很简单的，不用多说，主要介绍vue3。

首先在main.ts里面引入js，挂载全局：

import regex from './utils/reg.js';app.config.globalProperties.$regex = regex;

vue3的挂载不是在prototype上面，而是在globalProperties属性上

使用的时候也不是直接拿来用的：

import { getCurrentInstance, reactive, ref, } from "vue";let {proxy} = reactive(getCurrentInstance());let regTest:any = proxy.$regex;

getCurrentInstance代表全局上下文，因为vue3使用的是es6的proxy实现双向绑定的，所以此时需要定义在proxy上面，在proxy里面去拿全局属性

而我们默认的是非必填项，所以第一个参数是true，表示必填项，第二个参数就是为空提示（方法里面定义的是格式错误的提示）

const rules = {    telPhone: regTest.mobile(true, "请输入电话号码"),}