基于async-validator的表单验证validateRules.js封,iView、element的通用验证封装函数,包含常用手机、邮箱、身份证、验证码、QQ号码、微博账号、最小、最大等验证

开发基于Vue.js使用Element UI、iView UI的项目时,写验证和常用自定义验证可以封装成独立函数,轻松调用,

包含常用手机、邮箱、身份证、QQ号码、微博账号、最小、最大等验证。

 vue文件中调用(非常方便)

扩展验证调用

扩展验证方法编写 (validateRules.js底部 2023-04-12新增)

 

validateRules.js

/**
 * @description 表单验证封装
 */
export const regExp = {
  validateRequired(rule, value, callback, source, options, name, type){
    if (!value) {
      let action = '输入'
      if(['radio', 'select', 'cascader'].some(d=>d===type)){
        action = '选择'
      }
      callback(new Error('请'+action+name))
    } else {
      callback()
    }
  },
  // 10字符必填(同理20字符必填,50字符必填,1500字符必填)
  validateLen(rule, value, callback) {
    let stringLen1 = /^[\s\S]{1,10}$/
    if (!value) {
      callback(new Error('请填写XXXX'))
    } else if (!stringLen1.test(value)) {
      callback(new Error('超过10字符限制'))
    } else {
      callback()
    }
  },
  validateIP(rule, value, callback, source, options, isRequired = false) {
    // 支持通配符的ipv4正则
    const ipv4Regex = /^(?:[1-9]?[0-9]|1[0-9]{2}|2(?:[0-4][0-9]|5[0-5]))(?!.*?\.\*\.[*\d])(?:\.(?:(?:[1-9]?[0-9]|1[0-9]{2}|2(?:[0-4][0-9]|5[0-5]))|\*)){1,3}$/
    // Ipv4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
    //   Ipv6:
    const ipv6Regex = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
    //   Ipv4或者Ipv6:
    // let regex = /^(?:(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*)$/
    if (!value && !isRequired) {
      callback()
    } if (!value) {
      callback(new Error('请输入IP'))
    } else if (!ipv4Regex.test(value)&&!ipv6Regex.test(value)) {
      callback(new Error('请输入正确的IP'))
    } else {
      callback()
    }
  },
  //0-100百分比验证
  validatepercentage(rule, value, callback) {
    let reg = /^([1-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/
    if (!value) {
      callback(new Error('请输入比例'))
    } else if (!reg.test(value)) {
      callback(new Error('请输入0-100的数字'))
    } else {
      callback()
    }
  },
  // 手机号 (eg:138********,159********)
  validatePhone(rule, value, callback, source, options, isRequired = false) {
    let regPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
    if (!value && !isRequired) {
      callback()
    } else if (!value) {
      callback(new Error('请输入手机号码'))
    } else if (!regPhone.test(value)) {
      callback(new Error('手机号格式错误'))
    } else {
      callback()
    }
  },
  validatevoidname(rule, value, callback) {
    if (!value) {
      callback(new Error("请输入用户名"));
    } else {
      callback();
    }
  },
  // 用户名 (eg:a123456)
  validateUserName(rule, value, callback) {
    let regUserName = /^[0-9a-zA-Z]{6,16}$/
    if (!value) {
      callback(new Error('请输入登录账号'))
    } else if (!regUserName.test(value)) {
      callback(new Error('请输入6-16位由字母和数字组成的登录账号'))
    } else {
      callback()
    }
  },
  // 账号
  validateAccount(rule, value, callback, source, options, isRequired = false) {
    let regex = /^[\w_\d]{6,16}$/
    if (!value && !isRequired) {
      callback()
    } else if (!value) {
      callback(new Error('请输入账号'))
    } else if (!regex.test(value)) {
      callback(new Error('请输入6-16位由字母、数字或下划线组成的账号'))
    } else {
      callback()
    }
  },
  // 密码
  validatePassword(rule, value, callback) {
    let regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/
    if (!value) {
      callback(new Error('请输入密码'))
    } else if (!regPassword.test(value)) {
      callback(new Error('密码格式错误!必须包含6-18为字母和数字'))
    } else {
      callback()
    }
  },
  // 密码
  validateConfirmPassword(rule, value, callback, source, options, originPwd) {
    originPwd = originPwd()
    if (!value) {
      callback(new Error('请再次输入密码'));
    } else if (value !== originPwd) {
      callback(new Error('两次输入密码不一致!'));
    } else {
      callback();
    }
  },
  // 邮箱
  validateEmails(rule, value, callback, source, options, isRequired = false) {
    let regEmails = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
    // console.log('isRequired is: ', JSON.stringify(isRequired))
    if (!value && !isRequired) {
      callback()
    } else if (!value) {
      callback(new Error('请输入邮箱'))
    } else if (!regEmails.test(value)) {
      callback(new Error('邮箱格式错误'))
    } else {
      callback()
    }
  },
  // 金额验证
  validateAmount(rule, value, callback, source, options, isRequired = false) {
    let regAmount = /(^[0-9]{1,10}$)|(^[0-9]{1,10}[\.]{1}[0-9]{1,2}$)/
    if (!value && !isRequired) {
      callback()
    } else if (!value) {
      callback(new Error('请输入金额'))
    } else if (!regAmount.test(value)) {
      callback(new Error('金额格式错误,最多允许输入10位整数及2位小数'))
    } else {
      callback()
    }
  },
  // 身份证验证
  validateIdCard(rule, value, callback, source, options, isRequired = false, isEnabled = true) {
    let regIdCard = /^[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{3}([0-9]|X|x)$/
    if(!isEnabled){
      callback()
    }else if (!value && !isRequired) {
      callback()
    } else if (!value) {
      callback(new Error('请输入身份证号'))
    } else if (!regIdCard.test(value)) {
      callback(new Error('身份证号码格式错误'))
    } else {
      callback()
    }
  },
  // 银行卡验证
  validateBank(rule, value, callback, source, options, isRequired = false) {
    let regBank = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/
    if (!value && !isRequired) {
      callback()
    } else if (!value) {
      callback()
    } else if (!regBank.test(value)) {
      callback(new Error('银行卡号码格式错误'))
    } else {
      callback()
    }
  },
  // 非零正整数验证
  validateNum(rule, value, callback) {
    let reg = /^\+?[1-9][0-9]*$/
    if (!value) {
      callback(new Error('请填写非零正整数'))
    } else {
      if (reg.test(value) == false) {
        callback(new Error('请输入非零的正整数'))
      } else {
        callback()
      }
    }
  },
  // 银行卡
  validateBankCard(rule, value, callback) {
    let regBankCard = /^(\d{16}|\d{19})$/
    if (value == '') {
      callback(new Error('请输入银行卡号'))
    } else {
      if (regBankCard.test(value) == false) {
        callback(new Error('银行卡号格式错误'))
      } else {
        callback()
      }
    }
  },
  // 固话格式
  validateTel(rule, value, callback) {
    let regTel = /^(0\d{2,3}-?)?\d{7,8}$/
    if (value == '') {
      callback(new Error('请输入座机号码'))
    } else {
      if (regTel.test(value) == false) {
        callback(new Error('座机号码格式错误'))
      } else {
        callback()
      }
    }
  },
  // QQ号码
  validateQQ(rule, value, callback, source, options, isRequired = false) {
    let regex = /^[1-9][0-9]{4,}$/
    if (!value && !isRequired) {
      callback()
    } else if (!value) {
      callback(new Error('请输入QQ号码'))
    } else {
      if (!regex.test(value)) {
        callback(new Error('QQ号码格式错误'))
      } else {
        callback()
      }
    }
  },
  // weibo号
  validateWeibo(rule, value, callback, source, options, isRequired = false) {
    let regex = /^[0-9a-zA-Z\u4e00-\u9fa5_-]*$/
    if (!value && !isRequired) {
      callback()
    } else if (!value) {
      callback(new Error('请输入微博账号'))
    } else {
      if (!regex.test(value)) {
        callback(new Error('微博号码格式错误'))
      } else {
        callback()
      }
    }
  },
}
const triggerType = (trigger, type)=> {
  if(trigger) return trigger
  let triggerType = 'blur'
  if(['radio', 'select', 'number'].some(d=>d===type)){
    triggerType = 'change'
  }
  return triggerType
}
export const validateRules = {
  required: (name, type, trigger) => ({required: true, validator: (...rest)=>regExp.validateRequired.apply(regExp, rest.concat(name, type)), trigger: triggerType(trigger, type)}),
  range: (min, max, trigger) => [validateRules.min(min, trigger), validateRules.max(max, trigger)],
  password: (trigger) => ({validator: regExp.validatePassword, trigger: triggerType(trigger)}),
  account: (isRequired, trigger) => ({validator: (...rest) => regExp.validateAccount.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
  email: (isRequired, trigger) => ({validator: (...rest)=>regExp.validateEmails.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
  confirmPassword: (originPwd, trigger) => ({validator: (...rest) => regExp.validateConfirmPassword.apply(regExp, rest.concat(originPwd)), trigger: triggerType(trigger)}),
  phone: (isRequired, trigger) => ({validator: (...rest) => regExp.validatePhone.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
  ip: (isRequired, trigger) => ({validator: (...rest) => regExp.validateIP.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
  idCard: (isRequired, isEnabled, trigger) => ({validator: (...rest) => regExp.validateIdCard.apply(regExp, rest.concat(isRequired, isEnabled)), trigger: triggerType(trigger)}),
  qq: (isRequired, trigger) => ({validator: (...rest) => regExp.validateQQ.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
  weibo: (isRequired, trigger) => ({validator: (...rest) => regExp.validateWeibo.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
  amount: (isRequired, trigger) => ({validator: (...rest) => regExp.validateAmount.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
  min: (minLength, trigger) => ({min: parseInt(minLength), message: `最少输入${minLength}个字符`, trigger: triggerType(trigger)}),
  max: (maxLength, trigger) => ({max: parseInt(maxLength), message: `最多输入${maxLength}个字符`, trigger: triggerType(trigger)}),
}
/**
 * 扩展验证工厂函数
 * @param regexObj
 * @param isRequired
 * @param trigger
 * @returns {{validator: validator, trigger: (*|string), required: boolean}}
 */
const extRegExp = (regexObj, isRequired = false, trigger) => {
  return ({
    required: isRequired,
    validator: (rule, value, callback) => {
      const regex = regexObj.regex
      if (!value && !isRequired) {
        callback()
      }
      else if (!value) {
        callback(new Error(`请输入${regexObj.name}`))
      }
      else if (!regex.test(value)) {
        callback(new Error(`请输入${regexObj.errorTips}`))
      }
      else {
        callback()
      }
    },
    trigger: triggerType(trigger),
  })
  // return ({ validator: (...rest) => regExp.validateName(...rest.concat(isRequired)), trigger: triggerType(trigger) })
}
/**
 * 扩展正则验证器
 * @type {{lettersAndNumbers: {regex: RegExp, name: string}}}
 */
export const extValidateRules = {
  captcha: (isRequired, trigger) => extRegExp({
    name: '验证码', // 字母加数字,最大20位
    errorTips: '请输入正确的验证码',
    regex: /^[\d]{6}$/,
  }, isRequired, trigger),
  brandName: (isRequired, trigger) => extRegExp({
    name: '品牌名称', // 字母加数字,最大20位
    errorTips: '字母和数字的字符,最多20位',
    regex: /^[\w\d]{0,20}$/,
  }, isRequired, trigger),
  onlyNumber: (name, isRequired, trigger) => extRegExp({
    name: name || '数字', // 数字
    errorTips: `最多10位的${name}`,
    regex: /^[\d]{0,10}$/,
  }, isRequired, trigger),
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值