Vue 的身份证 手机号码 电话号码 邮箱等校验

news/2024/7/10 2:35:17 标签: Vue, 正则校验

一、基本身份证 手机号码等基本检验方式

 

/**
 * @desc 基于ElementUI Form rules 进行使用, 参考官方文档: http://element-cn.eleme.io/#/zh-CN/component/form [自定义校验规则]
 * @example  rules: {
 *  ip: [
 *    {required: true, message: '请输入矩阵IP', trigger: 'blur'},
 *    {validator: this.$rules.ipAddress, trigger: 'blur'}
 *  ]
 * }
 *

 */
export const validater = {

  /**
   * 校验 包括中文字、英文字母、数字和下划线
   * 登录账号校验
   */
  validateAccount(rule, value, callback) {
    let acount = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/
    if (value && (!(acount).test(value))) {
      callback(new Error('账号不符合规范'))
    } else {
      callback()
    }
  },

  /**
   * IP地址校验
   */
  ipAddress(rule, value, callback) {
	if(value && "..." === value){
		callback(new Error('请输入IP地址'))
	}if (value && !(/((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/).test(value)) {
      callback(new Error('IP地址不符合规范'))
    } else {
      callback()
    }
  },

  /**
   * 手机号码校验,注意：手机号码会随着社会的发展，衍生多种方式，请根据实际情况来，谢谢。
   * 原来：[1][34578]\d{9}      现在调整：[1][345789]\d{9}  
   */
  phoneNumber(rule, value, callback) {
    if (value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
      callback(new Error('手机号码不符合规范'))
    } else {
      callback()
    }
  },

  /**
   * 电话号码校验
   */
  telephoneNumber(rule, value, callback) {
    if (value && (!(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/).test(value))) {
      callback(new Error('电话号码不符合规范'))
    } else {
      callback()
    }
  },

  /**
   * 邮箱校验
   */
  emailValue(rule, value, callback) {
    let temp = /^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$/
    let tempOne = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/
    if (value && (!(temp).test(value))) {
      callback(new Error('邮箱格式不符合规范'))
    } else {
      callback()
    }
  },

  /**
   * 身份证号码校验
   */
  idCard(rule, value, callback) {
    if (value && (!(/\d{17}[\d|x]|\d{15}/).test(value) || (value.length !== 15 && value.length !== 18))) {
      callback(new Error('身份证号码不符合规范'))
    } else {
      callback()
    }
  },

  /**
   * 正整数校验
   */
  integerP(rule, value, callback) {
    if (value && !(/^[1-9]\d*$/).test(value)) {
      callback(new Error('只能填写正整数'))
    } else {
      callback()
    }
  },

  /**
   * 负整数校验
   */
  integerN(rule, value, callback) {
    if (value && !(/^-[1-9]\d*$/).test(value)) {
      callback(new Error('只能填写负整数'))
    } else {
      callback()
    }
  },

  /**
   * 英文字符校验
   */
  enText(rule, value, callback) {
    // let a = '',
    //   arr = value.split(" ")
    // for (let i = 0; i < arr.length; i++) { //删除行内空格
    //   a += arr[i];
    // }
    if (value && !(/^[A-Za-z]+$/).test(value)) {
      callback(new Error('只能填写英文字符'))
    } else {
      callback()
    }
  },

  /**
   * 中文字符英文字符校验
   */
  ChEnText(rule, value, callback) {
    if (value && !(/^[A-Za-z0-9]+$/).test(value)) {
      callback(new Error('只能填写数字和英文字符'))
    } else {
      callback()
    }
  },

  /**
   * 中文字符校验
   */
  cnText(rule, value, callback) {
    // let a = '',
    //   arr = value.split(" ")
    // for (let i = 0; i < arr.length; i++) { //删除行内空格
    //   a += arr[i];
    // }
    if (value && (/[^\u4e00-\u9fa5]/).test(value)) {
      callback(new Error('只能填写中文字符'))
    } else {
      callback()
    }
  },

  /**
   * 只能输入英文或者数字
   */
  enOrnunText (rule, value, callback) {
    if (value && !(/^[A-Za-z0-9]+$/).test(value)) {
      callback(new Error('只能填写英文或者数字'))
    } else {
      callback()
    }
  },

  /**
   * 20位数字国标编码校验，且为正整数
   */
  validateDeviceNo (rule, value, callback) {
    if (value && !(/^[1-9]\d*$/).test(value)) {
      callback(new Error('只能填写正整数'))
    } else {
      if (!/^[0-9]{20}$/.test(value)) {
        callback(new Error('请输入20位数字的编码！'));
      } else {
        callback();
      }
    }

  },

  /**
   *校验电脑Mac地址
   *以xx-xx-xx-xx-xx-xx的形式输入（xx为16进制数字）
   */
  validateMac (rule, value, callback) {
    let temp = /[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}/;
    if (!temp.test(value)) {
      callback(new Error('请输入xx-xx-xx-xx-xx-xx形式的MAC地址！'));
    } else{
      callback();
    }
  },

  /**
   * 校验地址代码或者分组代码
   */
  validateCode (rule, value, callback) {
    let num = /^[1-9]\d*$/
    if (value && !(num).test(value)) {
      callback(new Error('只能填写正整数'))
    } else {
      let codeLen = value.toString().length
      console.log(codeLen)
      if(codeLen > 0 && codeLen % 3 !== 0){
        callback(new Error('输入的长度必须是3的倍数'))
      }else if(codeLen>18){
        callback(new Error('输入的长度不能超过18位,请重新输入'))
      }
      else {
        callback()
      }
    }
  },

  /**
   * 校验字符长度
   */
  validateLength (rule, value, callback) {
    let codeLen = value.toString().length
    if(codeLen>18){
      callback(new Error('输入的长度不能超过20位,请重新输入'))
    }
  },

  /**
   * 数字 ,两位
   */
  validateTwoNum (rule, value, callback) {
    let temp = /^[1-9]{2}$/;
    if (!temp.test(value)) {
      callback(new Error('请输入两位正整数！'));
    } else{
      callback();
    }
  },

  /**
  * 校验经度是否符合规范
  * 
   */
  checkLongitude(rule, value, callback) {
    let longrg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
    if(!longrg.test(value)){
      callback(new Error('经度整数部分为0-180,小数部分为0到6位!'));
    } else {
      callback();
    }
    },

 /**
  * 校验纬度是否符合规范
  * 
  */
  checkLatitude(rule, value, callback) {
  var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
   if(!latreg.test(value)){
     callback(new Error('纬度整数部分为0-90,小数部分为0到6位!'));
   } else {
     callback();
   }
}
}

二、详细的身份校验方式

 

/*比较详细的身份证校验*/
Vue.prototype.isIdCard = (idCard) =>{
  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{4})|\d{3}[Xx])$)$/;
  if(regIdCard.test(idCard)){
    if(idCard.length === 18){
      let idCardWi = new Array( 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 );
      let idCardY = new Array( 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 );
      let idCardWiSum = 0
      for(let i=0;i<17;i++){
        idCardWiSum+=idCard.substring(i,i+1)*idCardWi[i];
      }
      let idCardMod=idCardWiSum%11
      let idCardLast=idCard.substring(17)
      if(idCardMod === 2){
        if(idCardLast === "X"||idCardLast === "x"){
          return true;
        }else{
          Vue.prototype.$message.warning('身份证号码错误!，请重新输入')
          return false;
        }
      }else{
        if(idCardLast === idCardY[idCardMod]){
          return true;
        }else{
          Vue.prototype.$message.warning('身份证号码错误!，请重新输入')
          return false;
        }
      }
    }
  }else{
    Vue.prototype.$message.warning('身份证格式不正确!，请重新输入')
    return false
  }
}

 

三 、使用方式

 

 

/*使用方式*/
rules: {
  mobilePhone: [
    {required: true, message: '请输入电话号码', trigger: 'blur'},
    {validator: this.$rules.phoneNumber, trigger: 'blur'}
  ],
    cardId: [
    {required: true, message: '请输入电话号码', trigger: 'blur'},
    {validator: this.$rules.idCard, trigger: 'blur'}
  ]
},

简单的博客描述只是记录自己的点点滴滴，若有不当的地方，欢迎指教，谢谢。


http://www.niftyadmin.cn/n/1197386.html

相关文章

移动web开发调试工具AlloyLever介绍

移动web开发调试工具AlloyLever介绍

简介 web调试有几个非常频繁的刚需&#xff1a;看log、看error、看AJAX发包与回包。其他的如timeline和cookie以及localstorage就不是那么频繁&#xff0c;但是AlloyLever都支持。如你所见&#xff1a; 特征 点击alloylever按钮之间切换显示或隐藏工具面板Console会输出所有用户…
阅读更多...
拉取远程代码时与本地代码冲突的解决方案之一

拉取远程代码时与本地代码冲突的解决方案之一

一、本解决方案基于IDEA开发工具讲解 ①基于stash 首先&#xff0c;右击项目--》git---》repository----》pull 拉取远程项目&#xff0c;出现failed时&#xff0c;不要慌张不要悲伤&#xff0c;黎明的时光会到来&#xff0c;稳住心态&#xff0c;开启灭 ‘’灭霸模式‘’。 接…
阅读更多...
【转载】四层和七层负载均衡的区别

【转载】四层和七层负载均衡的区别

简单理解四层和七层负载均衡:①所谓四层就是基于IP端口的负载均衡&#xff1b;七层就是基于URL等应用层信息的负载均衡&#xff1b;同理&#xff0c;还有基于MAC地址的二层负载均衡和基于IP地址的三层负载均衡。 换句换说&#xff0c;二层负载均衡会通过一个虚拟MAC地址接收请求…
阅读更多...
springboot service层注解失败

springboot service层注解失败

springboot 项目编译报错 报错信息如下 Description:Field blogArticleService in com.xgc.controller.BlogArticleController required a bean of type com.xgc.service.IBlogArticleService that could not be found.Action:Consider defining a bean of type com.xgc.serv…
阅读更多...
centos7 安装 Jenkins

centos7 安装 Jenkins

本博客只是记录自己学习的点点滴滴&#xff0c;如有雷同或者缺陷的地方&#xff0c;欢迎指教&#xff0c;谢谢。 1、安装Jenkins的原因 公司使用Jenkins部署项目&#xff0c;由于对这方面毫无了解&#xff0c;也不想就这样不了解&#xff0c;于是开启了Jenkins的学习之路。 2…
阅读更多...
Magicodes.WeiChat——使用AntiXssAttribute阻止XSS（跨站脚本攻击）攻击

Magicodes.WeiChat——使用AntiXssAttribute阻止XSS（跨站脚本攻击）攻击

跨站脚本攻击(Cross Site Scripting)&#xff0c;为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆&#xff0c;故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中Web里面的Script代码会被执行…
阅读更多...
对于开发人员的开发机配置选型应该如何抉择？

对于开发人员的开发机配置选型应该如何抉择？

对于现在的分布式开发&#xff0c; 一套机子要跑多个服务&#xff0c;开多个虚拟机&#xff0c;数据库&#xff0c;redis集群&#xff0c;solr集群&#xff0c;内存占用率动不动上10g&#xff0c;以最低适用的机子配置给开发员&#xff0c;应该可行了吧。。。 CUP肯定得i7 内存…
阅读更多...
原码, 反码, 补码详解

原码, 反码, 补码详解

在java虚拟机中&#xff0c;整数有byte、short、int、long四种&#xff0c;分别为8位、16位、32位、64位有符号整数。整数在计算机中使用补码表示&#xff0c;在java虚拟机中也不例外。下面简单介绍 原码 反码 补码 原码 原码就是符号位加上 数字的二进制表示&#xff0c; 即…
阅读更多...
最新文章

Copyright @ 2022~2023