前端框架中常见的公共方法汇总（三）：自定义表单验证规则

最新推荐文章于 2024-04-18 03:02:22 发布

1024_Byte

最新推荐文章于 2024-04-18 03:02:22 发布

阅读量439

点赞数 2

分类专栏： webpack 文章标签：前端 javascript webpack vue vue.js

本文链接：https://blog.csdn.net/DDD4V/article/details/120410266

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

/**

此方法可以全局混入 methods
也可以直接复制，局部使用

**/

开始时间不能大于结束时间

    validateDateRange(stm, etm) {
      if (moment(stm) > moment(etm)) {
        this.$message({
          message: '开始时间不能大于结束时间',
          type: 'error'
        })
        return false
      }
      return true
    }
复制代码

验证字符串中只包括中文、字母(大小写)、数字

validateString(rule, value = '', callback) {
      value = value ? this.trimSpace(value) : ''
      if (rule.required && !value) {
        return callback(new Error('不能为空'))
      }
      if (!rule.required && (value === null || value.length === 0)) {
        return callback()
      }
      if (rule.minLength && value.replace(/[\u0391-\uFFE5]/g, 'aa').length < rule.minLength) {
        return callback(new Error('不能少于' + rule.minLength + '位字符'))
      }
      if (rule.maxLength && value.replace(/[\u0391-\uFFE5]/g, 'aa').length > rule.maxLength) {
        return callback(new Error('不能多于' + rule.maxLength + '位字符'))
      }

      const reg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/
      if (!reg.test(value)) {
        return callback(new Error('请输入中文、英文、数字'))
      } else {
        callback()
      }
    },
复制代码

func:去除字符串空格

param:
     str（目标字符串）: 必填
     postion(指定空格位置)： 可选  left/左侧  right/右侧  all/左右
demo: xxx=this.trimSpace(xxx,'all')
*/
复制代码

    trimSpace(str = '', positon = 'all') {
      str = str ? str.toString() : ''
      if (str) {
        switch (positon) {
          case 'left':
            str = str.replace(/^[\s\n\t]+/g, '')
            break
          case 'right':
            str = str.replace(/[\s\n\t]+$/g, '')
            break
          default:
            str = str.replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, '')
            break
        }
      }
      return str
    },
复制代码

获取字符串实际 charLength(字节长度)

getCharLength(tartgetStr = '') {
      return this.trimSpace(tartgetStr).replace(/[\u0391-\uFFE5]/g, 'aa').length
    },
复制代码

func:自定义数字验证

 validateNumber(rule, value = '', callback) {
      value = value ? this.trimSpace(value) : ''
      if (rule.required && !value) {
        return callback(new Error('不能为空'))
      }
      if (!rule.required && (value === null || value.length === 0)) {
        return callback()
      }
      if (isNaN(value)) {
        return callback(new Error('输入数字'))
      }
      if (!isNaN(rule.maxNum) && rule.maxNum < Number(value)) {
        return callback(new Error(`最大：${rule.maxNum}`))
      }
      if (!isNaN(rule.minNum) && rule.minNum > Number(value)) {
        return callback(new Error(`最小：${rule.minNum}`))
      }
      if (rule.isInt && !/^-?\d+$/.test(value)) {
        return callback(new Error(`输入整数。`))
      }
      if (/^\+?[1-9][0-9]*$/.test(rule.precision) && value.toString().indexOf('.') > 0) {
        const len = value.substring(value.toString().indexOf('.') + 1).length
        if (rule.precision < len) {
          return callback(new Error(`小数点后最多保留${rule.precision}位数字。`))
        } else {
          return callback()
        }
      }
      if (rule.minLength && this.getCharLength(value) < rule.minLength) {
        return callback(new Error('最少输入' + rule.minLength + '位数字。'))
      }
      if (rule.maxLength && this.getCharLength(value) > rule.maxLength) {
        return callback(new Error('最多输入' + rule.maxLength + '位数字。'))
      } else {
        callback()
      }
    },
复制代码

验证字符串【非空、最大/最小字节（需转化为英文字符计算长度）、最大/最小长度、是否验证非法字符】

checkString(rule, value = '', callback) {
      value = value ? this.trimSpace(value) : ''
      if (rule.required && !value) {
        return callback(new Error('不能为空。'))
      }
      if (!rule.required && (value === null || value.length === 0)) {
        return callback()
      }
      // 只能输入 中英文数字
      if (rule.common && !/^[\u4e00-\u9fa5a-zA-Z0-9]+$/.test(value)) {
        return callback(new Error('请输入中文、英文、数字。'))
      }
      // 验证特殊字符
      const [regEn, regCn] = [/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im, /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im]
      if (rule.illegal && (regCn.test(value) || regEn.test(value))) {
        return callback(new Error('含特殊符号'))
      }
      // 是否验证实际字节长度
      if (rule.toChar) {
        // char's length
        if (rule.minChar && this.getCharLength(value) < rule.minChar) {
          return callback(new Error('最少输入' + rule.minChar + '位字符。'))
        }
        if (rule.maxChar && this.getCharLength(value) > rule.maxChar) {
          return callback(new Error('最多输入' + rule.maxChar + '位字符。'))
        }
      } else {
        // string's legth
        if (rule.minLength && value.length < rule.minLength) {
          return callback(new Error('最少输入' + rule.minLength + '个字。'))
        }
        if (rule.maxLength && value.length > rule.maxLength) {
          return callback(new Error('最多输入' + rule.maxLength + '个字。'))
        }
      }
      return callback()
    }
复制代码

验证手机号【非空、手机格式】

validateMobile(rule, value = '', callback) {
      value = value ? this.trimSpace(value) : ''
      if (rule.required && !value) {
        return callback(new Error('不能为空。'))
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value) && value) {
        return callback(new Error('手机号码格式错误。'))
      }
      return callback()
    }
复制代码

验证固定电话格式【非空、手机格式】

validateTelphone(rule, value = '', callback) {
      value = value ? this.trimSpace(value) : ''
      if (rule.required && !value) {
        return callback(new Error('不能为空。'))
      }
      if (!/^(0\d{2,3}\-)?([2-9]\d{6,7})+(\-\d{1,6})?$/.test(value) && value) {
        return callback(new Error('固定电话号码格式错误。'))
      }
      return callback()
    },
复制代码

手机或者固话

  isTel(rule, value = '', callback) {
      if (!value) {
        callback()
      } else {
        const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/ // 校验手机号和固定电话
        const tel = reg.test(value)
        if (!tel) {
          callback(new Error('电话输入格式错误'))
        } else {
          callback()
        }
      }
    }
复制代码

邮箱

 isEmail(rule, value = '', callback) {
      if (!value) {
        callback()
      } else {
        const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
        const email = reg.test(value)
        if (!email) {
          callback(new Error('格式如:admin@163.com'))
        } else {
          callback()
        }
      }
    },
复制代码

邮编

isPostcode(rule, value = '', callback) {
      if (!value) {
        callback()
      } else {
        const reg = /^[0-9]{6}$/
        const postcode = reg.test(value)
        if (!postcode) {
          callback(new Error('邮编格式错误，应为6位数字'))
        } else {
          callback()
        }
      }
    },