正则表达式验证封装

242 阅读1分钟

使用场景:

在平常的表单验证中要经常去进行if else判断。产生大量的代码和无营养的代码搬砖

封装:

/* 正则表达式 */

export const regular = params => {const rule = {    'img': /^https?://.*?(?:gif|png|jpg|jpeg|webp|svg|psd|bmp|tif)$/i,    'video': /^https?://.*?(?:swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/i,    'base64': /^s*data:(?:[a-z]+/[a-z0-9-+.]+(?:;[a-z-]+=[a-z0-9-]+)?)?(?:;base64)?,([a-z0-9!$&',()*+;=-._~:@/?%s]*?)s*$/i,    'bank': /^[1-9]d{9,29}$/,    'inphone': /^(?:(?:+|00)86)?1(?:(?:3[d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[d])|(?:9[1|8|9]))d{8}$/,    'email': /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,    'card': /^d{6}(18|19|20)d{2}(0d|10|11|12)([0-2]d|30|31)d{3}(d|X|x)$/,    'hinese': /^(?:[u3400-u4DB5u4E00-u9FEAuFA0EuFA0FuFA11uFA13uFA14uFA1FuFA21uFA23uFA24uFA27-uFA29]|[uD840-uD868uD86A-uD86CuD86F-uD872uD874-uD879][uDC00-uDFFF]|uD869[uDC00-uDED6uDF00-uDFFF]|uD86D[uDC00-uDF34uDF40-uDFFF]|uD86E[uDC00-uDC1DuDC20-uDFFF]|uD873[uDC00-uDEA1uDEB0-uDFFF]|uD87A[uDC00-uDFE0])+$/,    'WeChat': /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/,    'nick': /^[a-zA-Z0-9_-]{4,16}$/,    'password': /^[a-zA-Z0-9_-]{4,16}$/,    'qq': /^[1-9][0-9]{4,10}$/,    'otp': /^d{6}$/  }

/* 验证方法*/

let list = [];  params.map(v => {    if (!rule[v.rule].test(v.value)) {      list.push(v.text)    }  })  return list[0]}

使用方法:

引入封装组件

let list = [{ value: 'https://img.yzcdn.cn/vant/logo.png', text: '错误', rule: 'img' }, { value: '11', text: '错误11111', rule: 'img' }], regular = this.$regular(list)

if (regular) {

alert(regular)

}

参数说明:

value:要验证的数据

text:提示语

rule: 跟封装的正则表达式命名的字段