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

已于 2023-04-10 13:41:30 修改
阅读量1.5w 收藏 25
点赞数 10
文章标签： 前端 javascript
于 2023-04-04 15:10:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42125732/article/details/129951747
版权

前言

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

一、正则是什么？

正则表达式(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',
          },
        ],

}

总结

例如：以上就是今天要讲的内容，本文仅仅造了一些校验的轮子，为我们前端工作带来了极大的便利，有需要的同学自取，记得点赞噢 谢谢大家

是小橙丶
关注
  • 10
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue表单自定义校验规则介绍
10-18
今天小编就为大家分享一篇vue表单自定义校验规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue如何使用rules对表单字段进行校验
12-29
1、在代码中，添加属性：:rule <Form ref=loginForm :model=form :rules=rules @keydown.enter.native=handleSubmit class=form-con> <Input v-model=form.phone prefix=md-person placeholder=请输入您的手机号 size=large class=login-form-input :maxlength=11>
vue中，通过正则校验 手机号码格式
最新发布
Missbelover的博客
02-26 691
【代码】vue中，通过正则校验 手机号码格式。
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项
热门推荐
BMG-Princess
04-09 2万+
最全最全正则验证 + 表单验证 + 注意事项 一、正则验证 1.输入字母/数字/下划线： 2.请输入中英文/数字/下划线： 3.请输入中文/英文： 4.规范金额： 5.用户名不能全是数字: 6.中文： 7.非中文： 8.限制长度： 9.数字： 10.正整数及整数： 11.请输入数字(可正负) 12.请输入数字/小数点: 13.请输入0-9999 14.大写，小写，数字，特殊字符，至少上面的三种,至少八位 15.自定义校验 16.是否合法IP地址: 17.是否手
前端Vue中常用rules校验规则
xuehu837769474的博客
04-29 817
前提 在 wEB前端开发中，难免遇到各种表单校验，这里整理了一些校验方法。如果错误欢迎指出 1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2
vue的rules表单验证
工作内容分享
07-25 348
中定义rules规则。
Vue 正则表达式验证表单字段(如用户名/密码/真实姓名/身份证/手机号/邮箱)的合法性
寻思旧京洛
08-21 1万+
1. 给页面表单对象添加验证属性 由于我的项目使用的el-form,则给el-form添加属性 :rules="registerRules" ref="registerForm" 为el-form-item每个表单子项添加 prop 属性, 例如 <el-form-item prop="username"> <el-input name="username"...
vue 校验手机号、网址（各种正则校验）
mylbest的博客
08-26 1万+
vue form表单校验
vue验证电话号码和邮箱的正则表达式和代码示例
qq_28245087的博客
04-25 2628
【代码】vue验证电话号码和邮箱的正则表达式和代码示例。
前端Vue手机号校验及后端Java手机号校验
m0_66403070的博客
09-13 2088
前端Vue手机号校验及后端Java手机号校验
Vue正则验证:邮箱，手机号，身份证，IP，MAC，微信号等
xybhua的博客
12-31 3285
【代码】Vue正则验证:邮箱，手机号，身份证，IP，MAC，微信号等。
Vue中常用rules校验规则(实例代码)
10-15
主要介绍了Vue中常用rules校验规则，本文通过实例代码个大家介绍了一些校验方法,需要的朋友可以参考下
前端Vue 常用表单rules校验规则小结
邪小新的博客
07-15 432
前端表单提交中，需要对一些数值进行校验；下面就是总结的一些常用的表单校验规则：
Vue宝典之深入理解 rules 属性
Kuangtian的博客
12-12 1530
在 Vue 中，表单校验规则可以通过 rules 属性来定义。该属性是一个对象，包含了各个表单字段的校验规则。每个字段的校验规则是一个数组，可以包含多个校验规则。我们可以在 Vue 实例的 data 中定义 rules 属性，并为每个表单字段指定相应的校验规则。
常用 rules 正则校验
weixin_50339217的博客
06-26 2757
// 1.手机号校验 const mobile = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value) // 2.固话校验 const telephone = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(value) // 3.固话或手机号校验 const PhoneData = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/.test(value) // 4.邮箱校验 const EMail =
Vue rules校验规则详解
一碗清深的博客
11-16 1529
当我们在开发Vue应用时，经常需要对表单进行校验，以确保用户输入的数据符合预期。Vue提供了一个强大的校验规则机制，通过定义rules规则，可以方便地对表单进行验证，并给出相应的错误提示。
Vue element 自定义表单验证(验证联系方式、邮箱、邮政编码)
qq_46617584的博客
10-25 3953
Vue element 自定义表单验证(验证手机号或者区号、邮箱)
vue 表单rules验证邮箱，手机号
buzhidjiaosha的博客
08-14 703
【代码】vue 表单rules验证邮箱，手机号。
vue 身份证号rules校验
06-11
在 Vue.js 中，可以使用 `rules` 属性来进行表单验证，以下是一个简单的身份证号校验示例： HTML： ``` <template> <div> <el-form :model="form" :rules="rules" ref="form" label-width="80px"> <el-form-item label="身份证号" prop="idNumber"> <el-input v-model="form.idNumber"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> </template> ``` Vue.js： ``` <script> export default { data() { return { form: { idNumber: '' }, rules: { idNumber: [ { required: true, message: '请输入身份证号', trigger: 'blur' }, { validator: this.checkIdNumber, trigger: 'blur' } ] } } }, methods: { checkIdNumber(rule, value, callback) { // 身份证号校验 let idNumberReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if (!idNumberReg.test(value)) { callback(new Error('身份证号格式不正确！')); } else { callback(); } }, submitForm() { this.$refs.form.validate(valid => { if (valid) { alert('表单验证通过'); } else { alert('表单验证不通过'); return false; } }); } } } </script> ``` 在 `rules` 属性中，我们可以定义一个 `idNumber` 规则，包括两个验证条件： 1. `required`：表示此字段为必填项，如果没有填写内容则会提示 "请输入身份证号"。 2. `validator`：表示使用 `checkIdNumber` 方法进行自定义验证。 在 `checkIdNumber` 方法中，同样使用正则表达式进行身份证号校验，如果校验不通过则通过 `callback` 方法返回错误信息。 在提交表单时，使用 `validate` 方法进行表单验证，如果验证通过则会弹出 "表单验证通过" 的提示框，否则弹出 "表单验证不通过" 的提示框，并且阻止表单提交。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值