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

前言

在前端开发中,不管是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)
}
相关推荐
hj5914_前端新手2 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法2 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode3 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu3 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu3 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu3 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu3 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在3 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net