前端实用工具方法 —— 持续更新中...

【点赞收藏加关注，前端技术不迷路~】

一、校验工具及配置类

Vue.prototype.VTools = { ... }

1.基础校验

【整数、百分数值、手机号、手机号脱敏、登录密码、身份证号（含合法校验）、身份证号、车牌号、邮箱地址】

/*** 输入校验：整数*/
checkInit: function (rule, value, callback) {var ruleText = /^[1-9]\d*$|^[0]$/,massageText=(rule.messageText?rule.messageText:'整数');value=value?value.trim():value;if (value === '') {rule.beNull?callback():callback(new Error('请输入'+massageText));} else if (!ruleText.test(value)) {callback(new Error(massageText+'格式错误'));} else {callback();}
},/*** 输入校验：百分数值*/
checkRate: function (rule, value, callback) {var ruleText = /^[1-9]\d*^|$[0]$/,massageText=(rule.messageText?rule.messageText:'整数');value=value?value.trim():value;if (value === '') {rule.beNull?callback():callback(new Error('请输入'+massageText));} else if (!ruleText.test(value)) {callback(new Error(massageText+'格式错误'));} else {callback();}
},/*** 输入校验：手机号*/
checkMobile: function (rule, value, callback) {var ruleText = /^1[3|4|5|6|7|8|9]\d{9}$/,massageText=(rule.messageText?rule.messageText:'手机号');if (value === '' || value==undefined) {rule.beNull?callback():callback(new Error('请输入'+massageText));} else if (!ruleText.test(value)) {callback(new Error(massageText+'格式错误'));} else {callback();}
},/*** 输入校验：手机号脱敏*/
checkMobileSafe: function (rule, value, callback) {var ruleText = /^1[3|4|5|6|7|8|9]\d(\d{4}|\*{4})\d{4}$/,massageText=(rule.messageText?rule.messageText:'手机号');if (value === '' || value==undefined) {rule.beNull?callback():callback(new Error(rule.inlineMessage?'必填':('请输入'+massageText)));} else if (!ruleText.test(value)) {callback(new Error(rule.inlineMessage?'格式错误':(massageText+'格式错误')));} else {callback();}
},/*** 输入校验：登录密码检验大小写字母+数字*/
checkPasswordHigh: function (rule, value, callback) {var ruleText = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/,massageText=(rule.messageText?rule.messageText:'密码');value=value?value.trim():value;if (value === '') {callback(new Error('请输入'+massageText));} else if (!ruleText.test(value)) {callback(new Error('格式错误:6-16位必须包含大小写字母、数字'));} else {callback();}},/*** 输入校验：身份证号（含合法校验）*/
checkIdNo:function(rule, value, name, callback){var n = name?name:'';var k= value;var pa = {};var ereg = '';k = k.toUpperCase();var m = [true,"您输入的" + n + "身份证号码位数不对!","您输入的" + n + "身份证号码错误","您输入的" + n + "身份证号码错误","您输入的" + n + "身份证号码错误","您输入的" + n + "身份证号码错误"];var c = {11: "\u5317\u4eac",12: "\u5929\u6d25",13: "\u6cb3\u5317",14: "\u5c71\u897f",15: "\u5185\u8499\u53e4",21: "\u8fbd\u5b81",22: "\u5409\u6797",23: "\u9ed1\u9f99\u6c5f",31: "\u4e0a\u6d77",32: "\u6c5f\u82cf",33: "\u6d59\u6c5f",34: "\u5b89\u5fbd",35: "\u798f\u5efa",36: "\u6c5f\u897f",37: "\u5c71\u4e1c",41: "\u6cb3\u5357",42: "\u6e56\u5317",43: "\u6e56\u5357",44: "\u5e7f\u4e1c",45: "\u5e7f\u897f",46: "\u6d77\u5357",50: "\u91cd\u5e86",51: "\u56db\u5ddd",52: "\u8d35\u5dde",53: "\u4e91\u5357",54: "\u897f\u85cf",61: "\u9655\u897f",62: "\u7518\u8083",63: "\u9752\u6d77",64: "\u5b81\u590f",65: "\u65b0\u7586",71: "\u53f0\u6e7e",81: "\u9999\u6e2f",82: "\u6fb3\u95e8",91: "\u56fd\u5916"};var b, l;var e, j;var a = new Array();a = k.split("");if (k == "") {return true;}if (c[parseInt(k.substr(0, 2))] == null) {return m[4];}switch (k.length) {case 15:if ((parseInt(k.substr(6, 2)) + 1900) % 4 == 0 || ((parseInt(k.substr(6, 2)) + 1900) % 100 == 0 && (parseInt(k.substr(6, 2)) + 1900) % 4 == 0)) {ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;} else {ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;}if (ereg.test(k)) {var o = k.substr(6, 2);var f = k.substr(8, 2);var n = k.substr(10, 2);if (pa && pa.oServerDate) {var g = pa.oServerDate;} else {var h = new Date();var g = new Date(h.getFullYear(), h.getMonth(), h.getDate());}var d = new Date(o, parseInt(f, 10) - 1, n);if ((Date.parse(d) - Date.parse(g)) >= 0) {return m[5];}return m[0];} else {return m[2];}break;case 18:if (parseInt(k.substr(6, 4)) % 4 == 0 || (parseInt(k.substr(6, 4)) % 100 == 0 && parseInt(k.substr(6, 4)) % 4 == 0)) {ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;} else {ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;}if (ereg.test(k)) {e = (parseInt(a[0]) + parseInt(a[10])) * 7 + (parseInt(a[1]) + parseInt(a[11])) * 9 + (parseInt(a[2]) + parseInt(a[12])) * 10 + (parseInt(a[3]) + parseInt(a[13])) * 5 + (parseInt(a[4]) + parseInt(a[14])) * 8 + (parseInt(a[5]) + parseInt(a[15])) * 4 + (parseInt(a[6]) + parseInt(a[16])) * 2 + parseInt(a[7]) * 1 + parseInt(a[8]) * 6 + parseInt(a[9]) * 3;b = e % 11;j = "F";l = "10X98765432";j = l.substr(b, 1);if (j == a[17]) {var o = k.substr(6, 4);var f = k.substr(10, 2);var n = k.substr(12, 2);if (pa && pa.oServerDate) {var g = pa.oServerDate;} else {var h = new Date();var g = new Date(h.getFullYear(), h.getMonth(), h.getDate());}var d = new Date(o, parseInt(f, 10) - 1, n);if ((Date.parse(d) - Date.parse(g)) >= 0) {return m[5];}return m[0];} else {return m[3];}} else {return m[2];}break;default:return m[1];break;}return true;
},/***身份证号*/
certiNo: function (rule, value, callback) {let ruleText = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,massageText=(rule.messageText?rule.messageText:'证件号码');if (value === '' || value==undefined) {rule.beNull?callback():callback(new Error('请输入'+massageText));} else if (!ruleText.test(value)) {callback(new Error(massageText+'格式不正确'));} else {callback();}
},/*** 输入校验：校验车牌号*/
checkCarMark: function (rule, value, callback) {let ruleText = /(^[\u4e00-\u9fa5][a-zA-Z][a-zA-Z0-9]{4}[a-zA-Z0-9\u4e00-\u9fa5]$)|(^[\u4e00-\u9fa5][a-zA-Z][DFA][a-zA-Z0-9]{5}$)|(^[\u4e00-\u9fa5]{1}[a-zA-Z]{1}\*$)/,massageText=(rule.messageText?rule.messageText:'车牌号');if (value === '' || value==undefined) {rule.beNull?callback():callback(new Error(rule.inlineMessage?'必填':('请输入'+massageText)));} else if (value.length!=7 && value.length!=8 && value.length!=3) {callback(new Error(rule.inlineMessage?'格式错误':'请参照“京ABC123”或“京AD12345”格式填写车牌号'));} else if (!ruleText.test(value)) {callback(new Error(rule.inlineMessage?'格式错误':(value.length==8?'请参照“粤A[A/D/F]BC123”格式填写车牌号':'请参照“京ABC123”或“京AD12345”格式填写车牌号')));} else {callback();}
},/*** 输入校验：邮箱地址*/
email: function (rule, value, callback) {let ruleText = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,massageText=(rule.messageText?rule.messageText:'邮箱地址');if (value === '' || value==undefined) {rule.beNull?callback():callback(new Error(rule.inlineMessage?'必填':('请输入'+massageText)));} else if (!ruleText.test(value)) {callback(new Error(rule.inlineMessage?'格式错误':(massageText+'格式不正确')));} else {callback();}
},

2.日期类配置

【点击同一日期、禁用日期（今日之前）、禁用日期（明日之前）】

/*** 日期选择组件，点击同一日期如：2025-08-05，自动转成[2025-08-05, 2025-08-06]* 使用：<el-date-picker :change="VTools.datePickerChange"/>*/
datePickerChange (dateData) {dateData && dateData[0] === dateData[1] && (dateData[1] = new Date(new Date(dateData[1]).setDate(new Date(dateData[1]).getDate() + 1)).Format("yyyy-MM-dd"));
},/*** 日期选择组件，只能选择今天之前的日期* 使用：<el-date-picker :picker-options="VTools.dateBeforeToday"/>*/
dateBeforeToday: {disabledDate(time){return time.getTime() > Date.now() - 8.64e6}
},/*** 日期选择组件，只能选择明天之前的日期* 使用：<el-date-picker :picker-options="VTools.dateBeforeTommorrow"/>*/
dateBeforeTommorrow: {disabledDate(time) {return time.getTime() > Date.now();},
},

3.表格类配置

【金额格式化】

/*** 表格金额格式化* 使用：<el-table-column :formatter="VTools.toFix2"/>*/
toFix2 (row,column,value) {return value?Number(value).toFixed(2):0.00;
},

二、全局工具

1.日期格式

/*** 日期格式化工具* format：将date格式日期按照pattern模板转成对应string格式日期* parse：将string格式日期按照pattern模板转成对应date格式日期*/
formatDate:{format: function (date, pattern) {pattern = pattern || DEFAULT_PATTERN;return pattern.replace(SIGN_REGEXP, function ($0) {switch ($0.charAt(0)) {case 'y': return padding(date.getFullYear(), $0.length);case 'M': return padding(date.getMonth() + 1, $0.length);case 'd': return padding(date.getDate(), $0.length);case 'w': return date.getDay() + 1;case 'h': return padding(date.getHours(), $0.length);case 'm': return padding(date.getMinutes(), $0.length);case 's': return padding(date.getSeconds(), $0.length);}});},parse: function (dateString, pattern) {var matchs1 = pattern.match(SIGN_REGEXP);var matchs2 = dateString.match(/(\d)+/g);if (matchs1.length == matchs2.length) {var _date = new Date(1970, 0, 1);for (var i = 0; i < matchs1.length; i++) {var _int = parseInt(matchs2[i]);var sign = matchs1[i];switch (sign.charAt(0)) {case 'y': _date.setFullYear(_int); break;case 'M': _date.setMonth(_int - 1); break;case 'd': _date.setDate(_int); break;case 'h': _date.setHours(_int); break;case 'm': _date.setMinutes(_int); break;case 's': _date.setSeconds(_int); break;}}return _date;}return null;}
},

2.对象空值操作

【去空值属性、去属性值无效空格】

/*** 对象去除空值属性*/
removeEmpty:function(data){var result={};for(var key in data){if(data[key]!=''){result[key]=data[key]}}return result;
},/*** 对象属性值去除无效空格*/
trimData:(data)=>{let newData = {};if (typeof data == "object" && data!=null){if(data.length !=undefined){newData = [];}for(let key in data){if(typeof data[key] == 'string'){newData[key] = data[key].replace(/(^\s*)|(\s*$)/g, "")}else if(typeof data[key] == 'object'){newData[key] = Vue.prototype.GTools.trimData(data[key]);}else{newData[key] = data[key];}}}else{newData = data;}return newData;
},

3.金额格式化

【价格格式化、金额通用格式化】

/*** 价格格式化->万元*/
priceFormat:function(price){if(!price) return;var priceStr=price.toString();if(priceStr.lastIndexOf(".")!=-1){priceStr=priceStr.substr(0,priceStr.lastIndexOf("."));}var priceF;if(priceStr.length>4){priceF=priceStr.substring(0,(priceStr.length-4));priceF+=(priceStr.slice(-4,-3)!=='0')?"."+priceStr.slice(-4,-3):'';priceF+="万";}else{priceF=priceStr+"元";}return priceF;
},/*** 金额格式化方法* 参数说明：（金额，是否含有两位小数，是否文本输出，是否更改单位）*/
formatAmount:function(amount,noFloat,isLabel,changeUnit){let label='';let amountStr='';typeof(amount) !='number' && (amount=parseFloat(amount));if(changeUnit && amount>=999999999){amount=(parseFloat(amount)/100000000<1?(parseFloat(amount)/100000000).toFixed(2):(parseFloat(amount)/100000000).toFixed(noFloat?0:2) );label='亿';}else if(changeUnit && amount>=99999){amount=(parseFloat(amount)/10000<1?(parseFloat(amount)/10000).toFixed(2):(parseFloat(amount)/10000).toFixed(noFloat?0:2) );label='万';}else if(amount>0){amount=(parseFloat(amount)<1?parseFloat(amount).toFixed(2):parseFloat(amount).toFixed(noFloat?0:2));}if(isLabel){return label;}else {amount+=''let amountArr1=amount.split('.')[0];let amountArr2 ='';if( !noFloat && amount.indexOf('.')>=0) {amountArr2 = amount.split('.')[1];}while(amountArr1.length>3){let tempStr=amountArr1.substring(0,amountArr1.length%3==0?3:amountArr1.length%3);if(amountStr!=''){amountStr+=',';}amountStr+=tempStr;amountArr1=amountArr1.replace(tempStr,'');}if(amountStr!=''){amountStr+=',';}amountStr+=amountArr1;if(amountArr2){amountStr+='.'+amountArr2;}return amountStr;}
},

4.语音播报

/*** 语音播报方法*/
AudioPlayBystr(str_tip,onstartBack,onendBack,onpauseBack,onresumeBack,onerror){var msg =new SpeechSynthesisUtterance();msg.rate = 0.8; //播放语速msg.pitch = 1; //音调高低msg.text = str_tip;msg.volume = 10 ;//播放音量msg.lang="zh-CN";//语言类型speechSynthesis.speak(msg);//播放msg.onstart=function() {//开始播放onstartBack && onstartBack();};msg.onend=function() {//播放完成onendBack && onendBack();};msg.onpause=function() {//播放暂停onpauseBack && onpauseBack();};msg.onresume=function() {//播放重新开始onresumeBack && onresumeBack();};msg.onerror=function(error){//播放出现错误onerror && onerror(error);};
},

三、内置对象原型方法扩展

1.Date

【指定格式化、日期格式化、时间格式化】

/*** Date对象指定格式化：yyyy-MM-dd hh:mm:ss*/
Date.prototype.Format = function (fmt) {let o = {"M+": this.getMonth() + 1, //月份"d+": this.getDate(), //日"h+": this.getHours(), //小时"m+": this.getMinutes(), //分"s+": this.getSeconds(), //秒"q+": Math.floor((this.getMonth() + 3) / 3), //季度"S": this.getMilliseconds() //毫秒};if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));}for (let k in o)if (new RegExp("(" + k + ")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;
};/*** Date对象格式化：年-月-日*/
Date.prototype.toLocalJSON = function () {var day = this.getDate(),month = this.getMonth() + 1,year = this.getFullYear();if (day < 10) {day = "0" + day;}if (month < 10) {month = "0" + month;}return year + "-" + month + "-" + day;
};/*** Date对象格式化：年-月-日 时:分:秒*/
Date.prototype.toLocalJSONAll = function () {var day = this.getDate(),month = this.getMonth() + 1,year = this.getFullYear(),hour=this.getHours(),minute=this.getMinutes(),second=this.getSeconds();if (day < 10) {day = "0" + day;}if (month < 10) {month = "0" + month;}if (hour < 10) {hour = "0" + hour;}if (minute < 10) {minute = "0" + minute;}if (second < 10) {second = "0" + second;}return year + "-" + month + "-" + day + ' ' + hour + ':' + minute + ':' + second;
};/*** Date对象格式化：时:分:秒*/
Date.prototype.toLocalJSONTime = function () {var hour=this.getHours(),minute=this.getMinutes(),second=this.getSeconds();if (hour < 10) {hour = "0" + hour;}if (minute < 10) {minute = "0" + minute;}if (second < 10) {second = "0" + second;}return hour + ':' + minute + ':' + second;
};

2.Vue

【notify提示、有效数据长度、自适应autoTable】

/*** notify提示二次封装*/
Vue.prototype._GMessage = ({message,type,duration}) => {//如果需要提示不抵冲则注释掉下方closeAll，现先保持与message一样新的抵冲掉旧的// Vue.prototype.$notify.closeAll();Vue.prototype.$notify({message: message || '',type: type || 'info',title: type == 'success'? '成功': type == 'error'? '失败' : '提示',position: 'top-right',duration: duration || 5500,customClass: 'tcNotify'});
};/*** 目标对象有效数据长度*/
Vue.prototype._DataSize=(data)=>{let result=0;switch(typeof data){case 'string':result = data.length;break;case 'object':result = data?Object.keys(data).length:0;break;case 'number':case 'boolean':result = 1;break;case 'undefined':default :result = 0;break;}return result;
};/*** autoTable计算* target说明：*      prop: 数据key*      1abe1: 表头*      className: 列的 className*      too1tip: 是否鼠标具浮展示*      fixed: 是否浮动固定列*      tips: 提示信息*      align: 列对齐*      formatter: 数据格式化方法*      search: 是否过滤*      slot: 插槽*      forcesize: 固定宽度，通常与tooltip搭配使用*      sizeLimit: 最长宽度，通常与forceSize搭配使用*      meta: 业务自定义透传对象，key不能与上面重复* 使用说明：*      表头初始化：建议放在created中直接使用：*      this.listColumns = this._handleAutoColumns(this.sourceColumns, []);*          this.columns: el-table内 用template遍历el-table-column*          this.sourceColumns: 为表头配置信息*  <template v-for="columnObj in listColumns"><el-table-column v-if="columnObj.fixed" :fixed="columnObj.fixed" :prop="columnObj.key" :label="columnObj.label" :width="columnObj.width?columnObj.width:100" :class-name="columnObj.className" :show-overflow-tooltip="columnObj.tooltip"></el-table-column><el-table-column v-else-if="columnObj.key=='statusFormat'" :label="columnObj.label" :min-width="columnObj.width?columnObj.width:100" :class-name="columnObj.className" :show-overflow-tooltip="columnObj.tooltip"><template slot-scope="scope" v-if="!scope.row.isEmpty"><i class="fa fa-circle" :class="scope.row.status=='1'?'colorGreen':'colorRed'">{{scope.row.status=='1'?'有效':'无效'}}</i></template></el-table-column><el-table-column v-else-if="columnObj.key=='operateFormat'" fixed="right" :label="columnObj.label" :min-width="columnObj.width?columnObj.width:100" :class-name="columnObj.className" :show-overflow-tooltip="columnObj.tooltip"><template slot-scope="scope" v-if="!scope.row.isEmpty"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)" style="margin-left:0;">查看/修改</el-button><!--<el-button v-if="userInfo.userInfo.isOrgAdmin=='1'" size="mini" @click="handleReset(scope.$index, scope.row)">重置密码</el-button>--><el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column><el-table-column v-else :prop="columnObj.key" :label="columnObj.label" :min-width="columnObj.width?columnObj.width:100" :class-name="columnObj.className" :show-overflow-tooltip="columnObj.tooltip"></el-table-column></template>* *      表头根据数据动态调整：建议放在http请求回调中使用：*      this.listColumns = this._handleAutoColumns(this.sourceColumns, target);*/
Vue.prototype._handleAutoColumns = (target, source) => {return autoColumns(target,source);
}
function autoColumns(targetList, sourceData) {const unitwidth = 14;const exWidth = 22;const result = [];const specailExwidth = {};targetList && targetList.forEach((temp) => {const data = {...(temp.meta || {}),prop: temp.prop,label: temp.label,className: temp.className ? temp.className : '',tooltip: temp.tooltip ? temp.tooltip : false,fixed: temp.fixed ? temp.fixed : false,tips: temp.tips ? temp.tips : '',align: temp.align ? temp.align : '',formatter: temp.formatter ? temp.formatter : null,search: temp.search || null,slot: temp.slot || '',forcesize: temp.forcesize,sortable: temp.sortable || false}if (temp.children && temp.children.length > 0) {const subList = autoColumns(temp.children, sourceData);data['children'] = subList;result.push(data)} else {let maxsize = temp.defaultsize ? temp.defaultsize : 0;if (!temp.forcesize || temp.sizeLimit) {sourceData && sourceData.forEach((item) => {const str = item[temp.prop] + '' ? item[temp.prop] + '' : '';const substr = str ? str.replace(/[a-zA-Z\d\*\,\.\;\:\"\'\-\_\s]/g, '') : '';const tempsize = Math.ceil(subStr.length * 0.55 + (str.length - subStr.length));maxSize = Math.max(maxSize,tempSize);});temp.label && (maxsize = Math.max(maxSize, temp.label.length));}if (temp.sizeLimit) {maxSize = Math.min(maxSize, temp.sizeLimit);}if (temp.fixed) {data['fixed'] = temp.fixed;}data['width'] = Math.ceil(maxSize * unitwidth) + exwidth;specailExWidth[temp.prop] && (data['width'] += specailExWidth[temp.prop]);result.push(data);}});return result;
}

关于自适应autoTable的el-table的优化方案，【autoTable + 配置式开发 + 配置式模板】将在后续进行进一步讲解，敬请期待！

实用的全局方法是结合实际使用环境逐步迭代的，并且是需要结合实际环境进行针对性的具体实现调整。本帖子持续更新中...