在项目中,特别是后台管理项目中我们需要很多正则的校验,如果每个页面一个个的写,对于我来说很不爽
如果集中管理那岂不是更好?
我习惯在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, "请输入电话号码"), }