实用的js验证判断函数

238 阅读5分钟

正则获取当前的元素价格

作用:在返回的字符中,只获取数字,其他都省略

const verifyPrice =(value)=>{
    //判断当前是否有值
  if (value !== '' && value !== null && value !== undefined) {
     return value.replace(/[^0-9.]/ig, "")
  } else {
    return 0
  }
}

验证邮箱是否正确

作用:验证当前用户输入的内容是否符合邮件的格式

const verifyEmail = (value)=> {
  let mailreg = /^\w+([\.\'-]?[\w+]?)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/;
  let resultstr = value.replace(/^\s*|\s*$/g,"") //\s表示空格含义
  if (value !== null && value !== undefined) {
    if (value == "") {
      return false
    } else {
      if (!mailreg.test(resultstr)) {
        return false
      }
      return true
    }
  } else {
    return false
  }
}

验证当前是否输入纯数字的值

作用:判断当前的值是否是纯数字

const verifyTel =(value)=> {
  if (value !== undefined && value !== null) {
    let tel = alue.replace(/^\s*|\s*$/g,"") //\s表示空格含义
    let reg = /^[0-9.]+$/;
    let modify = reg.test(tel)
    if (!modify) {
      return false
    } else {
      return true
    }
  } else {
    return false
  }
}

string转数字 有小数点

说明:

(参数一:字符串 参数二:显示有几位小数点)

const strNumberTwoDot = (number, type) => {
  let newData = ''
  if (number !== undefined && number !== null) {
    switch (type) {
      case 1:
         newData = number.replace(/[^0-9.]/g, '').replace(/\.{2,}/g, ".").replace(/^(\d+)\.(\d).*$/g, '$1.$2');
        break;
      case 2:
        newData = number.replace(/[^0-9.]/g, '').replace(/\.{2,}/g, ".").replace(/^(\d+)\.(\d\d).*$/, '$1.$2');
        break;
    }
  }
  return newData
}

时间的显示格式

作用:通过获取的时间,今天和昨天显示时分秒 其他事件显示完整的数

const contentTime =  (date)=> {
    //获取到今天的时间
    let nowTime = new Date();
    // //把时分秒的时间设置为0点
    nowTime.setHours(0);
    nowTime.setMinutes(0);
    nowTime.setSeconds(0);
    nowTime.setMilliseconds(0);
    let today = nowTime.getTime();
    //获取到传递过来的时间转化为字符串
    let spliceTime = date.indexOf(":");
    let rawTime = date.substring(0, spliceTime - 3);
    //兼容苹果的时间转化格式
    date = date.replace(/-/g, '/');
    let rawTimeAll = new Date(date);
    let rawHours = rawTimeAll.getHours() > 9 ? rawTimeAll.getHours() : '0' + rawTimeAll.getHours();
    let rawMinutes = rawTimeAll.getMinutes() > 9 ? rawTimeAll.getMinutes() : '0' + rawTimeAll.getMinutes();
    let rawSeconds = rawTimeAll.getSeconds() > 9 ? rawTimeAll.getSeconds() : '0' + rawTimeAll.getSeconds();
    date = date.substring(0, 19);
    var timestamp = new Date(date).getTime();
    let otime = today - timestamp;
    let isToday = otime / 1000 / 60 / 60
    if (isToday >= -24 && isToday <= 0) {
        return `今天 ${rawHours}:${rawMinutes}:${rawSeconds}`
    } else if (isToday > 0 && isToday <= 24) {
        return `昨天 ${rawHours}:${rawMinutes}:${rawSeconds}`
    } else {
        return rawTime
    }
}

获取年月日时分秒

参数1:需要转换格式的时间
const time = (date ) => {
  let year = date.getFullYear().toString()
  let mon = date.getMonth() + 1
  mon = mon.toString().length === 2 ? mon : ('0' + mon)
  let day = date.getDate()
  day = day.toString().length === 2 ? day : ('0' + day)
  let hours = date.getHours()
  hours = hours.toString().length === 2 ? hours : ('0' + hours)
  let min = date.getMinutes()
  min = min.toString().length === 2 ? min : ('0' + min)
  let se = date.getSeconds()
  se = se.toString().length === 2 ? se : ('0' + se)
  return `${year}-${mon}-${day} ${hours}:${min}:${se}`
}

判断文件的大小

作用:判断文件是否超过一定范围

const fileSize = (data)=> {
    var fileSizeByte = data;
    var fileSizeMsg = "";
    if (fileSizeByte > 0) {
        if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
        else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
        else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
        else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
        else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
        else fileSizeMsg = "文件超过1TB";
        return fileSizeMsg;
    } else {
        return "0KB"
    }
}

判断当前是否是微信环境下

作用:当前用户使用场景是否是微信环境下

const isWinxin = ()=>{
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

关闭当前窗口

作用:用户可以关闭当前页面

 var browserName = navigator.appName;
     if (browserName == "Netscape") {
       window.open("", "_self", "");
       window.close();
      }
      if (browserName == "Microsoft Internet Explorer") {
        window.parent.opener = "whocares";
       window.parent.close();
     }

判断两个对象是否相等

作用:判断函数中的属性是否都存在,同时属性的值是否都相等

const verifyObject = (a, b)=> {
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);
    if (aProps.length != bProps.length) {
        return false;
    }
    for (var i = 0; i < aProps.length; i++) {
        if (aProps[i] != '__ob__') {
            var propName = aProps[i]
            var propA = a[propName]
            var propB = b[propName]
            if (propA != propB) {
                return false
            }
        }
    }
    return true
}

点击跳转

作用:点击某个点时跳转到固定地方

html
<a href="javascript:void(0)" @click="goAnchor('#explainOthBox')" > </a>
 <div id="explainOthBox" > </div>
 js
  //锚点
goAnchor(selector) {
  var anchor = this.$el.querySelector(selector) // 参数为要跳转到的元素id
 if (anchor) {
   setTimeout(() => {//页面没有渲染完成时是无法滚动的,因此设置延迟
     anchor.scrollIntoView(); //js的内置方法,可滚动视图位置至元素位置
    }, 500);
  }
},

字符串循环复制,count->次数

function repeatStr(str, count) {
    var text = '';
    for (var i = 0; i < count; i++) {
        text += str;
    }
    return text;
}

字符替换*,隐藏手机号或者身份证号等

function replaceStr(str, regArr, type, ARepText) {
    var regtext = '',
        Reg = null,
        replaceText = ARepText || '*';
    //repeatStr是在上面定义过的(字符串循环复制),大家注意哦
    if (regArr.length === 3 && type === 0) {
        regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})'
        Reg = new RegExp(regtext);
        var replaceCount = this.repeatStr(replaceText, regArr[1]);
        return str.replace(Reg, '$1' + replaceCount + '$2')
    }
    else if (regArr.length === 3 && type === 1) {
        regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}'
        Reg = new RegExp(regtext);
        var replaceCount1 = this.repeatStr(replaceText, regArr[0]);
        var replaceCount2 = this.repeatStr(replaceText, regArr[2]);
        return str.replace(Reg, replaceCount1 + '$1' + replaceCount2)
    }
    else if (regArr.length === 1 && type === 0) {
        regtext = '(^\\w{' + regArr[0] + '})'
        Reg = new RegExp(regtext);
        var replaceCount = this.repeatStr(replaceText, regArr[0]);
        return str.replace(Reg, replaceCount)
    }
    else if (regArr.length === 1 && type === 1) {
        regtext = '(\\w{' + regArr[0] + '}$)'
        Reg = new RegExp(regtext);
        var replaceCount = this.repeatStr(replaceText, regArr[0]);
        return str.replace(Reg, replaceCount)
    }
}
//replaceStr(字符串,字符格式, 替换方式,替换的字符(默认*))
//ecDo.replaceStr('18819322663',[3,5,3],0)
//result:188*****663
//ecDo.replaceStr('asdasdasdaa',[3,5,3],1)
//result:***asdas***
//ecDo.replaceStr('1asd88465asdwqe3',[5],0)
//result:*****8465asdwqe3
//ecDo.replaceStr('1asd88465asdwqe3',[5],1,'+')
//result:"1asd88465as+++++"

格式化处理字符串

function formatText(str, size, delimiter) {
    var _size = size || 3, _delimiter = delimiter || ',';
    var regText = '\\B(?=(\\w{' + _size + '})+(?!\\w))';
    var reg = new RegExp(regText, 'g');
    return str.replace(reg, _delimiter);
}

//ecDo.formatText('1234asda567asd890')
//result:"12,34a,sda,567,asd,890"
//ecDo.formatText('1234asda567asd890',4,' ')
//result:"1 234a sda5 67as d890"
//ecDo.formatText('1234asda567asd890',4,'-')
//result:"1-234a-sda5-67as-d890"

现金额大写转换函数

function upDigit(n) {
    var fraction = ['角', '分', '厘'];
    var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
    var unit = [
        ['元', '万', '亿'],
        ['', '拾', '佰', '仟']
    ];
    var head = n < 0 ? '欠人民币' : '人民币';
    n = Math.abs(n);
    var s = '';
    for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
    }
    s = s || '整';
    n = Math.floor(n);
    for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
        for (var j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
        //s = p + unit[0][i] + s;
    }
    return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
} 


//ecDo.upDigit(168752632)
//result:"人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"
//ecDo.upDigit(1682)
//result:"人民币壹仟陆佰捌拾贰元整"
//ecDo.upDigit(-1693)
//result:"欠人民币壹仟陆佰玖拾叁元整"

字母大小写切换

/*type
 1:首字母大写
 2:首页母小写
 3:大小写转换
 4:全部大写
 5:全部小写
 * */
function changeCase(str, type) {
    function ToggleCase(str) {
        var itemText = ""
        str.split("").forEach(
            function (item) {
                if (/^([a-z]+)/.test(item)) {
                    itemText += item.toUpperCase();
                } else if (/^([A-Z]+)/.test(item)) {
                    itemText += item.toLowerCase();
                } else {
                    itemText += item;
                }
            });
        return itemText;
    }
    switch (type) {
        case 1:
            return str.replace(/\b\w+\b/g, function (word) {
                return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
            });
        case 2:
            return str.replace(/\b\w+\b/g, function (word) {
                return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
            });
        case 3:
            return ToggleCase(str);
        case 4:
            return str.toUpperCase();
        case 5:
            return str.toLowerCase();
        default:
            return str;
    }
}

input只保存数字和字符

  <input v-model="cardNumber"
                       label="卡号"
                       @input="cardNumber=cardNumber.replace(/[^0-9a-zA-Z]/g, '')" />

对图片进行过滤(旋转图片)

 //过滤上传的图片是否保留有选择字符(参数一:正在上传的照片base64格式,参数二:完整的文件信息)
 const modifyFileImg = (base, file) => {
   //图片方向角 added by lzk
   var Orientation = null;
   if (file) {
     //加载图片设置为同步请求
     return new Promise((resolve, reject) => {
       //获取照片方向角属性,用户旋转控制
       EXIF.getData(file, function () {
         Orientation = EXIF.getTag(this, 'Orientation');
         var image = new Image();
         image.src = base;
         image.onload = function () {
           var expectWidth = this.naturalWidth;
           var expectHeight = this.naturalHeight;
           if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
             expectWidth = 800;
             expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
           } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
             expectHeight = 1200;
             expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
           }
           var canvas = document.createElement("canvas");
           var ctx = canvas.getContext("2d");
           canvas.width = expectWidth;
           canvas.height = expectHeight;
           ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
           var base64 = null;
           if (Orientation != "" && Orientation != 1) {
             switch (Orientation) {
               case 6: //需要顺时针(向左)90度旋转
                 rotateImg(this, 'left', canvas);
                 break;
               case 8: //需要逆时针(向右)90度旋转
                 rotateImg(this, 'right', canvas);
                 break;
               case 3: //需要180度旋转
                 rotateImg(this, 'right', canvas); //转两次
                 rotateImg(this, 'right', canvas);
                 break;
             }
           }
           base64 = canvas.toDataURL("image/jpeg", 0.8);
           resolve(base64)
         };
       })
     });
   }
 }

 //对图片进行旋转
 const rotateImg = (img, direction, canvas) => {
   //alert(img);
   //最小与最大旋转方向,图片旋转4次后回到原方向  
   var min_step = 0;
   var max_step = 3;
   //var img = document.getElementById(pid);  
   if (img == null) return;
   //img的高度和宽度不能在img元素隐藏后获取,否则会出错  
   var height = img.height;
   var width = img.width;
   //var step = img.getAttribute('step');  
   var step = 2;
   if (step == null) {
     step = min_step;
   }
   if (direction == 'right') {
     step++;
     //旋转到原位置,即超过最大值  
     step > max_step && (step = min_step);
   } else {
     step--;
     step < min_step && (step = max_step);
   }
   //旋转角度以弧度值为参数  
   var degree = step * 90 * Math.PI / 180;
   var ctx = canvas.getContext('2d');
   switch (step) {
     case 0:
       canvas.width = width;
       canvas.height = height;
       ctx.drawImage(img, 0, 0);
       break;
     case 1:
       canvas.width = height;
       canvas.height = width;
       ctx.rotate(degree);
       ctx.drawImage(img, 0, -height);
       break;
     case 2:
       canvas.width = width;
       canvas.height = height;
       ctx.rotate(degree);
       ctx.drawImage(img, -width, -height);
       break;
     case 3:
       canvas.width = height;
       canvas.height = width;
       ctx.rotate(degree);
       ctx.drawImage(img, -width, 0);
       break;
   }
 }

一维数组变成tree

const toTree = (dataList) => {
  let newData = []
  if (dataList !== null && dataList !== undefined) {
    let cloneData = JSON.parse(JSON.stringify(dataList)) // 对源数据深度克隆
    newData = cloneData.filter((father) => {
      // 循环所有项,并添加children属性
      let branchArr = cloneData.filter(
        (child) => father.id == child.parentId
      ) // 返回每一项的子级数组
      branchArr.length > 0 ? (father.children = branchArr) : '' //给父级添加一个children属性,并赋值
      return father.flag == true
    })
  }
  return newData
}

遍历获取对象中某个符合的值

let list = [
      {
        id: 1,
        name: '家电',
        goods: [
          {
            id: 11,
            name: '冰箱'
          },
          {
            id: 12,
            name: '冰箱'
          }
        ]
      },
      {
        id: 2,
        name: '家具',
        goods: [
          {
            id: 21,
            name: '沙发'
          },
          {
            id: 22,
            name: '电视'
          }
        ]
      },
      {
        id: 3,
        name: '家具',
      }
    ]
    // @params:lists (需要循环的数组) value (需要查找的值) key (需要查找的key名) 
    function getId({ lists, value, key }) {
      let returnData = null
      try {
        lists.forEach((item, index) => {
          if (returnData) {
            throw Error('跳出循环')
            return;
          }
          if (item[key] === value) {
            returnData = item
          } else if (item.goods && item.goods.length > 0) {
            let data = getId({ lists: item.goods, value, key })
            data ? returnData = data : null
          }
        })
      } catch (e) { }
      return returnData
    }
    console.log(getId({ lists: list, value: 11, key: 'id' }));//{id: 11, name: "冰箱"}

深拷贝

let list = [
      {
        id: 1,
        name: '家电',
        goods: [
          {
            id: 11,
            name: '冰箱'
          },
          {
            id: 12,
            name: '冰箱'
          }
        ]
      },
      {
        id: 2,
        name: '家具',
        goods: [
          {
            id: 21,
            name: '沙发'
          },
          {
            id: 22,
            name: '电视'
          }
        ]
      },
      {
        id: 3,
        name: '家具',
      }
    ]
   let newData = []
    //进行深拷贝
    // @params newObj (新的对象) oldObj (要被进行拷贝的对象)
    function deepCopy({ newObj, oldObj }) {
      for (let k in oldObj) {
        let item = oldObj[k]
        //判断当前数据的类型
        if (item instanceof Array) {
          //先判断数组类型 是因为数组也是Object
          newObj[k] = []
          deepCopy({ newObj: newObj[k], oldObj: item })
        } else if (item instanceof Object) {
          newObj[k] = {}
          deepCopy({ newObj: newObj[k], oldObj: item })
        } else {
          newObj[k] = item
        }
      }
    }
    deepCopy({ newObj: newData, oldObj: list })
    newData[1].id = 351
    console.log(newData) //改变
    console.log(list) //未改变

函数节流

 function throttle(fn, args, delay) {
      let timer = null
      return function () {
        if (timer) return
        let $this = this
        timer = setTimeout(function () {
          fn.apply($this, args)
          timer = null
        }, delay)
      }
    }
    
    案例:
       //反转数组
    let list = ['I', 'am', 'a', 'student', 'yes']
    function reverArr(...arrs) {
      let arr = JSON.parse(JSON.stringify(arrs))
      let len = arr.length - 1
      let modifyLen = Math.floor(arr.length / 2)
      for (i = 0; i < modifyLen; i++) {
        [arr[i], arr[len - i]] = [arr[len - i], arr[i]]
      }
      return arr
    }
    //屏幕尺寸改变的时候调用函数
    window.onresize = throttle(reverArr, list, 500)