1. Toy模板网首页
  2. > Toy博客

前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验

10月前 作者：是小橙鸭丶 分类：Toy博客 阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

前言

一、正则是什么？

二、造轮子

三、轮子使用实例

总结

前言

例如：随着前端的发展，很多功能都需要在前端填写时就先校验是否填写正确，则博主写了一些校验轮子供大家使用。

一、正则是什么？

正则表达式(regular expression)是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个子字符串，将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子串等。


为什么要用正则：
前端往往有大量的表单数据校验工作，采用正则表达式会使得数据校验的工作量大大减轻。常用效果：邮箱、手机号、身份证号等
 

二、造轮子

1.电话号码/手机号/身份证/邮箱校验

/**
 * @description 判断是否是手机号
 * @param value
 * @returns {boolean}
 */
export function isPhone(value) {
  const reg = /^1\d{10}$/
  return reg.test(value)
}

// 电话号码验证
export function validatePhone(rule, value, callback) {
  const mobilereg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ // 手机
  const phonereg = /^0\d{2,3}-?\d{7,8}$/ // 固话
  const noAreaPhonereg = /^[1-9]\d{6,7}$/ // 无区号固话
  rule.phonetype = rule.phonetype || 'mobile'
  if (rule.phonetype === 'mobile') {
    if (value && !mobilereg.test(value))
      callback(new Error(i18n.t('common.validatePhone')))
    else callback()
  }

  if (rule.phonetype === 'phone') {
    if (value && !phonereg.test(value))
      callback(new Error(i18n.t('common.validatePhone')))
    else callback()
  }

  if (rule.phonetype === 'all') {
    if (value && !phonereg.test(value) && !mobilereg.test(value))
      callback(new Error(i18n.t('common.validatePhone')))
    else callback()
  }

  if (rule.phonetype === 'allAndNoArea') {
    if (
      value &&
      !phonereg.test(value) &&
      !mobilereg.test(value) &&
      !noAreaPhonereg.test(value)
    )
      callback(new Error(i18n.t('common.validatePhone')))
    else callback()
  }
}

/**
 * @description 判断是否是身份证号(第二代)
 * @param value
 * @returns {boolean}
 */
export function isIdCard(value) {
  const reg =
    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  return reg.test(value)
}

/**
 * @description 判断是否是邮箱
 * @param value
 * @returns {boolean}
 */
// 邮箱验证
export function validateEmail(rule, value, callback) {
  const reg = /^([a-zA-Z]|[0-9])(\w|\-|\.)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
  if (!value) return callback(new Error('请输入收件人邮箱'))
  if (!reg.test(value)) {
    callback(new Error(i18n.t('common.validateEmail')))
  } else {
    callback()
  }
}


/**
 * validate IDCard 身份证
 * @returns
 */
export function validateIDCard(val) {
  if (checkCode(val)) {
    var date = val.substring(6, 14)
    if (checkDate(date)) {
      if (checkProv(val.substring(0, 2))) {
        return true
      }
    }
  }
  return false
}
/**
 * check Prov
 */
var checkProv = function (val) {
  var pattern = /^[1-9][0-9]/
  var provs = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '内蒙古',
    21: '辽宁',
    22: '吉林',
    23: '黑龙江 ',
    31: '上海',
    32: '江苏',
    33: '浙江',
    34: '安徽',
    35: '福建',
    36: '江西',
    37: '山东',
    41: '河南',
    42: '湖北 ',
    43: '湖南',
    44: '广东',
    45: '广西',
    46: '海南',
    50: '重庆',
    51: '四川',
    52: '贵州',
    53: '云南',
    54: '西藏 ',
    61: '陕西',
    62: '甘肃',
    63: '青海',
    64: '宁夏',
    65: '新疆',
    71: '台湾',
    81: '香港',
    82: '澳门',
  }
  if (pattern.test(val)) {
    if (provs[val]) {
      return true
    }
  }
  return false
}
/**
 * check Date
 */
var checkDate = function (val) {
  var pattern = /^(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)$/
  if (pattern.test(val)) {
    var year = val.substring(0, 4)
    var month = val.substring(4, 6)
    var date = val.substring(6, 8)
    var date2 = new Date(year + '-' + month + '-' + date)
    if (date2 && date2.getMonth() == parseInt(month) - 1) {
      return true
    }
  }
  return false
}
// 校验码校验
var checkCode = function (val) {
  var p =
    /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
  var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
  var code = val.substring(17)
  if (p.test(val)) {
    var sum = 0
    for (var i = 0; i < 17; i++) {
      sum += val[i] * factor[i]
    }
    if (parity[sum % 11] == code.toUpperCase()) {
      return true
    }
  }
  return false
}

2.外链 IP 传统网站 端口号判断

/**
 * @description 判读是否为外链
 * @param path
 * @returns {boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * @description 判断是否为IP
 * @param ip
 * @returns {boolean}
 */
export function isIP(ip) {
  const reg =
    /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
  return reg.test(ip)
}

/**
 * @description 判断是否是传统网站
 * @param url
 * @returns {boolean}
 */
export function isUrl(url) {
  const reg =
    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

/**
 * @description 判断是否是端口号
 * @param value
 * @returns {boolean}
 */
export function isPort(value) {
  const reg =
    /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
  return reg.test(value)
}

3.大写字母/小写字母/字符串/数组

/**
 * @description 判断是否是小写字母
 * @param value
 * @returns {boolean}
 */
export function isLowerCase(value) {
  const reg = /^[a-z]+$/
  return reg.test(value)
}

/**
 * @description 判断是否是大写字母
 * @param value
 * @returns {boolean}
 */
export function isUpperCase(value) {
  const reg = /^[A-Z]+$/
  return reg.test(value)
}

/**
 * @description 判断是否是大写字母开头
 * @param value
 * @returns {boolean}
 */
export function isAlphabets(value) {
  const reg = /^[A-Za-z]+$/
  return reg.test(value)
}

/**
 * @description 判断是否是字符串
 * @param value
 * @returns {boolean}
 */
export function isString(value) {
  return typeof value === 'string' || value instanceof String
}

/**
 * @description 判断是否是数组
 * @param arg
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

4.经纬度判断

/**
 * @description 判断经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
 * @param value
 * @returns {boolean}
 */
export function isLongitude(value) {
  const reg = /^[-|+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d\.\d{1,5}|180\.0{1,5})$/
  return reg.test(value)
}

/**
 * @description 判断纬度 -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
 * @param value
 * @returns {boolean}
 */
export function isLatitude(value) {
  const reg = /^[-|+]?([0-8]?\d\.\d{1,5}|90\.0{1,5})$/
  return reg.test(value)
}

5.rtsp校验

/**
 * @description rtsp校验，只要有rtsp://
 * @param value
 * @returns {boolean}
 */
export function isRTSP(value) {
  const reg =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
  const reg1 =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/
  const reg2 =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\//
  return reg.test(value) || reg1.test(value) || reg2.test(value)
}

6.表单的一些校验

// 只允许输入数字或字母
export function validateIntOrLet(rule, value, callback) {
  const reg = /^[0-9a-zA-Z]+$/
  if (!reg.test(value)) {
    callback(new Error('只允许输入数字或字母'))
  } else {
    callback()
  }
}

// 只允许输入数字
export function validateInt(rule, value, callback) {
  const reg = /^[0-9]+$/
  if (value && !reg.test(value)) {
    callback(new Error(i18n.t('common.validateInt')))
  } else if (value && 10 < value.length) {
    callback(new Error(i18n.t('common.dataLengthTip', { number: 10 })))
  } else {
    callback()
  }
}


// 只允许输入正整数
export function validateIntNumber(rule, value, callback) {
  const reg = /^[1-9]\d*$/
  if (value && !reg.test(value)) {
    callback(new Error(i18n.t('common.validatePositiveInt')))
  } else {
    callback()
  }
}


// 只允许输入正整数或者含有1到4位小数的数字  0/0.0001/123
export function validateFloatNumbertoFixed(rule, value, callback) {
  value = `${value}`.trim()
  let n = Number(value)
  if (isNaN(n)) {
    return callback(new Error('请输入数字'))
  }

  if (n === 0) {
    return callback()
  }

  // 可见小数位
  let { decimalPlaces, message } = rule
  decimalPlaces = decimalPlaces || 4
  // console.log('validateIntNumber:', rule)
  // var reg = /^[1-9]\d*(\.\d{1,4})?$/ //1到4位小数
  const reg = new RegExp(`^\\d+(\\.\\d{1,${decimalPlaces}})?$`)
  if (value && !reg.test(value)) {
    callback(new Error(message || '只允许输入正整数或者含有1到4位小数的数字'))
  } else {
    return callback()
  }
}

三、轮子使用实例

import { validateFloatNumbertoFixed } from '@/utils/validate'

rules: {

    salePrice: [
          {
            required: true,
            message: '必填字段',
            trigger: 'change',
          },
          {
            decimalPlaces: 2,
            message: '只允许输入正整数或者含有1到2位小数的数字',
            validator: validateFloatNumbertoFixed,
            trigger: 'blur',
          },
        ],

}

总结

例如：以上就是今天要讲的内容，本文仅仅造了一些校验的轮子，为我们前端工作带来了极大的便利，有需要的同学自取，记得点赞噢 谢谢大家文章来源地址https://www.toymoban.com/news/detail-702949.html

到了这里，关于前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue中的rules表单校验规则使用方法 :rules=“rules“

    vue中的rules表单校验规则使用方法 :rules=“rules“

    :ref=\\\"dataForm\\\"        // 提交表单时进行校验 :rules=\\\"rules\\\"            // return 下的校验规则 :model=\\\"userForm\\\"  // 绑定表单的值 点击提交时，会先对表单的值进行校验判断，校验通过后，再进行后续操作。 el-form-item 里面使用 prop 属性绑定规则 el-form-item label=\\\"充值金额\\\"  prop=\\\"amo

    2024年02月05日
    浏览(49)
  • 身份证合法性校验规则

    身份证合法性校验规则

    身份证构成说明：   身份证号构成（从左到右）： 第1-6位数是行政区域编码 第7到第14位是出生日期 第15-17位是同一天出生的顺序号（男的用奇数数，女的用偶数） 第18位是校验码，根据ISO7064:1983.MOD11-2校验码算法可以验证该身份证号是否合法身份证号。 身份证格式校验：

    2023年04月23日
    浏览(127)

  • uniapp表单uni-forms校验自定义校验规则，手机校验、身份证校验

    validateFunction 自定义校验规则 如果需要使用 validateFunction 自定义校验规则,则 不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在 onReady 生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定

    2024年02月11日
    浏览(92)

  • Web 前端常用正则校验规则

    作为 Web 前端开发，常用的正则校验规则有很多。下面是一些常见的示例： 手机号码的正则表达式可以根据不同国家和地区的手机号码格式进行调整。以下是中国大陆的手机号码正则表达式： 在这个示例中，正则表达式 ^1[3456789]d{9}$ 表示： ^ 表示匹配字符串的开头。 1 表示

    2024年02月06日
    浏览(38)
  • Antd-rules-自定义校验规则

    Antd-rules-自定义校验规则

    公司UI出了一个表单提交的规则校验效果 需要自定义rules才可以实现 只要输入错误就提示红色边框 并且不可以提交 如何实现？ ##解决 antd官方给了案例 自定义校验规则 实现如下： 1，需要自定义rules 2，自定义validator 3，填写你的规则方法 1，需要自定义rules 2，自定义validat

    2024年02月08日
    浏览(38)
  • for循环遍历的`form表单组件`rules规则校验失效问题——下拉框选择之后还是报红---亲测有效

    for循环遍历的`form表单组件`rules规则校验失效问题——下拉框选择之后还是报红---亲测有效

    问题:   大概的效果就是这种, for循环选择之后还是还是报红 看文章之前 :  先检查  model  rules pops 有没有判定好 解决:    参考了他的 for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填，亲测有效——基础积累_a-form-model的validatefield方法循环遍

    2024年02月07日
    浏览(42)
  • vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验

    vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验

    一、问题描述 这里由一个动态切换规则校验引发的一些问题，整理了下，如下文所示。 这里有个需求就是，动态切换radio，对input输入框校验，界面如下 在网上找了一圈，用了第一种方法来解决，动态添加验证规则，方法如下 通过if判断platformType是否等于2，然后添加规则，

    2023年04月19日
    浏览(41)

  • 三、Prometheus常用告警规则rules.yml

               本文是我根据日常Prometheus监控运维经验，列出的企业生成中常见的Prometheus服务监控告警规则。 目录 1、服务器告警规则 node_exporter_rules.yml 2、Radis服务告警规则  redis_exporter_rules.yml 3、RabbitMQ服务告警规则 rabbitmq_exporter_rules.yml 4、kafka集群服务告警规则  ka

    2024年02月14日
    浏览(43)
  • vue表单及遍历表单校验rules以及validator校验器的使用

    vue表单及遍历表单校验rules以及validator校验器的使用

    为防止用户犯错，尽可能更早地发现并纠正错误。 Element中Form （表单）组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 注意：prop对应表单域 model 字段，使用 validate方法时，该属性是必填的。 目

    2024年02月08日
    浏览(43)

  • vue+element多层表单校验prop和rules

    核心点：外层循环是item和index，内层循环是item2和index2 如果都是定义的同一个属性名 外层循环得写 :prop=\\\"\\\'block.\\\'+index+\\\'.numerical\\\'\\\" 同理内层循环就得写 :prop=\\\"\\\'objectSpecs.\\\'+ index2 + \\\'.numerical\\\'\\\" 校验函数方法 :rules=\\\"getRules(item2, item2.name)\\\"

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包