集中管理正则

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

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

我习惯在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);
    }
} 

转载自：https://blog.csdn.net/qq_26751319/article/details/109787700

 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, "请输入电话号码"),
}