使用场景:
在平常的表单验证中要经常去进行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: 跟封装的正则表达式命名的字段