前端常用的封装方法(值得收藏)

前言

在前端开发中,不管是pc端还是移动端,都需要使用到一些方法,比如电话号码的校验,身份证号的校验,邮箱的校验,节流、以及输入框的防抖等,时间的格式封装(可以使用dayjs库实现),深拷贝,浅拷贝,防抖(可以使用[\[lodash\]](https://www.lodashjs.com/))

防抖

javascript 复制代码
//防抖 //在一个事件触发的最后一次,按特定时间后执行
const debounce = (fn, time) => {
  let timer
  return function (...argu) {
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
    timer = setTimeout(() => {
      fn(...argu)
      clearTimeout(timer)
      timer = null
    }, time)
  }
}

节流

javascript 复制代码
export function useThrottle() {
  const throttle = (fn, delay) => {
    let timer = null;
    return function () {
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(this, arguments);
          timer = null;
        }, delay);
      }
    };
  };
 
  return { throttle };
}

姓名的隐私正则

javascript 复制代码
//两位名字,第二个字"*"
//3个字的名字,中间"*"
const samsung=(str)=>{
  var replcenem='';
  //三位姓名的中间变星号
  if(str.length>=3){
    replcenem=str.replace(/^(.+).(.)$/, "$1*$2");
    return replcenem
  }
  if (str.length == 2){  //两位的姓名,后面以为变星号
      var strSplit=str.split('');
      var strSplitone = strSplit[0];
      replcenem = strSplitone+'*';
      return replcenem
  }

}

邮箱格式校验

javascript 复制代码
function emailValidator(email){
	if( typeof(email) =='string'){
	let regexp = new RegExp(/^([a-zA-Z0-9_\-\.]+)@((\w+\.)+\w+)$/)
	if(regexp.test(email)){
	console.log('邮箱输入正确')
	}else{
	console.log('请输入正确的邮箱格式')
	}
	}
}

身份证号格式校验

javascript 复制代码
function checkIdCard(val) {
if(typeof(val)!='string'){
val+='' //使其变成string
}
  const idCardPattern = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
  if (!idCardPattern.test(val)) {
    console.log('您输入的身份证号码不正确!');
  }
}

手机格式校验

javascript 复制代码
function phoneValidator (phone){
	let regexp = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)
	if(regexp.test(phone) ){
	console.log('输入正确')
	}else{
	console.log('手机格式错误')
	}
}

手机号隐私处理

javascript 复制代码
//手机号隐私处理
export const handlePhone=(phone)=>{
  if(!phone){
    return '--'
  }else{
    return phone.substring(0,3)+'****'+phone.substring(7)
  }
  
}

普通车牌的校验

javascript 复制代码
const jiaoyan (chepai)=>{
/^[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新]{1}[ABCDEFGHJKLMNOPQRSTUVWXY]{1}[0-9A-Z]{5}$/u
let regexp = new RegExp(/^[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新]{1}[ABCDEFGHJKLMNOPQRSTUVWXY]{1}[0-9A-Z]{5}$/u)
return regexp.test(chepai)
}
相关推荐
web行路人6 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0017 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92125 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂28 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石36 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程37 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二1 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236481 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript