正则校验、身份证校验、判空、防抖节流

1、图片判断
/^image\/(jpe?g|png|gif)$/.test(file.type);
2、金额判断
/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
/^\d*\.?\d*$/
3、手机号判断
/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
4、非负整数
/^\d+$/
5、email校验
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

1、身份证校验
（1）validate.js

/**
     * @description : 校验身份证号是否合规（18位、15位）
     * @param        {String|Number} value
     * @return       {Boolean} true-合规 false-不合规
     */
 export function checkPsidno(value) {
  const psidno = String(value)
  // 1.校验身份证号格式和长度
  const regPsidno = /^(^[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{4})|\d{3}[X])$)$/
  if (!regPsidno.test(psidno)) {
    return false
  }
  // 2.校验前两位的省份编码是否正确
  const province = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江 ', 31: '上海', 32: '江苏', 33: '浙江', 34: '安徽', 35: '福建', 36: '江西', 37: '山东', 41: '河南', 42: '湖北 ', 43: '湖南', 44: '广东', 45: '广西', 46: '海南', 50: '重庆', 51: '四川', 52: '贵州', 53: '云南', 54: '西藏 ', 61: '陕西', 62: '甘肃', 63: '青海', 64: '宁夏', 65: '新疆', 71: '台湾', 81: '香港', 82: '澳门', 91: '国外' }
  if (!province[Number(psidno.slice(0, 2))]) {
    return false
  }
  // 3.校验出生日期
  if (psidno.length === 15) {
    // 15位号码 省（2位）市（2位）县（2位）年（2位）月（2位）日（2位）校验码（3位）
    const reg = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/)
    const arrSplit = psidno.match(reg)
    // 15位号码在年份前补 19 或 20
    const year = Number(arrSplit[2].charAt(0)) > 0 ? '19' + arrSplit[2] : '20' + arrSplit[2]
    const month = arrSplit[3]
    const day = arrSplit[4]
    if (!validateBirthday(year, month, day)) {
      return false
    }
  } else if (psidno.length === 18) {
    // 18位号码 省（2位）市（2位）县（2位）年（4位）月（2位）日（2位）校验码（4位）
    const reg = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/)
    const arrSplit = psidno.match(reg)
    const year = arrSplit[2]
    const month = arrSplit[3]
    const day = arrSplit[4]
    if (!validateBirthday(year, month, day)) {
      return false
    }
  } else {
    return false
  }
  // 校验出生日期是否合理
  function validateBirthday(year, month, day) {
    year = Number(year) // 年
    month = Number(month) // 月
    day = Number(day) // 日
    const nowTime = new Date().getTime() // 当前时间戳
    const birthTime = new Date(`${year}-${month}-${day}`).getTime() // 获取出生日期的时间戳
    // 不能是明天出生的吧
    if (birthTime > nowTime) {
      return false
    }
    // 一般人活不到150岁吧
    const nowYear = new Date().getFullYear()
    if ((nowYear - year) > 150) {
      return false
    }
    // 不能是13月出生的吧
    if (month < 1 || month > 12) {
      return false
    }
    // 不能是2月30号、4月31号、5月32号出生的吧
    const date = new Date(year, month, 0) // 获取当月的最后一天
    if (day < 1 || day > date.getDate()) {
      return false
    }
    return true
  }
  // 4.18位号码校验生成的校验码
  if (psidno.length === 18) {
    const Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2] // 加权因子
    const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'] // 校验码
    let sum = 0
    for (let i = 0; i < 17; i++) {
      sum += Number(psidno.charAt(i)) * Wi[i]
    }
    if (parity[sum % 11] !== psidno[17]) {
      return false
    }
  }
  return true
}

（2）使用

import { checkPsidno } from '@/utils/validate'
let b = true
if (this.idnumber && !checkPsidno(this.idnumber)) {
  this.$message.error({
    message: '请输入正确的身份证'
  })
  b = false
  return
} 

if(b){
	//验证成功之后的操作
}

2、判空
（1）isnull.js

export const isNull = (param) => {
  return param == undefined || param == "" || param == null;
}

export function isEmpty(value) {
  if (value === null) return true; // 未声明
  if (value === undefined) return true; // 未定义
  if (typeof value === 'function') return true; // 空函数

  if (Array.isArray(value) && value.length === 0) return true; // 空数组
  if (value.constructor === Map && value.size === 0) return true; // 空Map
  if (value.constructor === Set && value.size === 0) return true; // 空Set

  if (typeof value === 'string' && value.trim() === '') return true; // 空字符串
  if (typeof value === 'object' && Object.keys(value).length === 0) return true; // 空对象

  if (typeof value === 'number' && isNaN(value)) return true; // NaN
  if (typeof value === 'boolean' && !value) return true; // false
  if (value === 0) return true; // 数字0

  return false; // 非空
}

（2）使用

import { isNull } from '@/utils/isnull'
let b = true
if (isNull(this.name)) {
  this.$message.error({
    message: '请输入姓名'
  })
  b = false
  return
} 
if(b){
	//验证成功之后的操作
}

注：富文本为空判断

if (isNull(this.article.content) || this.article.content == '<p><br></p>') {
  this.$message.error({
    message: '请输入文章内容'
  })
}

3、防抖节流
（1）throttle.js

// 节流
export function _throttle(fn, wait = 500) {
  let last, now
  return function() {
    now = Date.now()
    if (last && now - last < wait) {
      last = now
    } else {
      last = now
      fn.call(this, ...arguments)
    }
  }
}
 
// 防抖
export function _debounce(fn, wait = 500) {
  let timer
  return function() {
    let context = this
    let args = arguments
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, wait)
  }
}

（2）使用

import { _throttle, _debounce } from '@/utils/throttle'

<input v-model="keyword" type="text" placeholder="请输入搜索条件">

watch: { //防抖
  keyword: _debounce(function () {
    this.getDataList()
  }),
},

参考：
1、实现 input 只能输入数字和小数点的四种方法
2、【JavaScript】身份证号码合规性校验（支持18位、15位）
3、vue input输入框防抖debounce函数的使用
4、正则表达式-匹配各种特殊字符
5、正则表达式 附正则表达式表示空的方法