正则关于数字字母汉字特殊符号正则校验

故事背景:最近在做一个自定义配置流程的项目, 被小伙伴要求写一个数字字母汉字特殊符号可以任意组合进行校验的正则, 作为一个自认为正则掌握还不错的小前端, 我很愉快的接下了这个任务, 但是做的时候还是花了一点点时间的, 所以今天 mark 一下, 毕竟这样的业务场景还是比较多的, 希望给简友提供一丝丝帮助吧。

配置表单的页面如下:

image.png
使用页面效果如下:
image.png
代码块如下:

const regexpMap = {
  1: '\u4e00-\u9fa5', // 汉字编码集
  2: '0-9', // 0到9数字集合
  3: 'a-zA-Z', // 大小写字母集合
  4: "`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ " // 特殊符号集合
}
// 服务端给的表单类型枚举值映射, 用于表单提示
const descMap = {
  1: '汉字',
  2: '数字',
  3: '字母',
  4: '符号'
}
/**
 * @params val: 校验的值, inputType: 校验的枚举集[]Number filedsValuesLength: 限制的长度, cb 校验不通过的回调
 * @example testField('1test正则', [2,3], 10, err => { // [2, 3] 校验数字和字母   10: 文本长度校验为10
      console.log('只能输入数字字母类型')
    }) // 
 */
export const testField = (val, inputType, filedsValuesLength, cb) => {
  const inputTypeStr = inputType.map(v => regexpMap[v]).join()
  const str = `^[${inputTypeStr}]{0,${filedsValuesLength}}$`
  const strRegexp = new RegExp(str, 'g')
  if (val.length > filedsValuesLength) {
    const err = `长度超过了${filedsValuesLength}`
    cb(err)
    return
  }
  if (!strRegexp.test(val)) {
    const err = `只能输入${inputType.map(v => descMap[v]).join(',')}类型`
    cb(err)
  }
}

推荐一个学习正则的视频