vue+res正则方法封装+密码强度/格式+邮件等等

最新推荐文章于 2024-07-18 16:57:14 发布
最新推荐文章于 2024-07-18 16:57:14 发布
阅读量4.2k 收藏 1
点赞数 1
分类专栏： vue-插件 文章标签： vue+res正则方法封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41619796/article/details/103052145
版权

前言：

        在看了vue的一些源码后，想将自己觉得有使用价值的一些方法封装处理，这里的话是对正则的封装，里面有很多常用方法，比如将金额换成大写，校验密码的格式，强度，校验手机号码，校验邮件.......

使用步骤：

第一：按需引入内部功能：

import {要使用的方法} from '@/libs/rex_check'

第二：设置变量接收方法返回值

let nowVal = '';//输入值
let value = 方法(nowVal);//这里的value是返回值

第三：这里简单说说一些内部方法

1、email验证，传值进来，会返回一个true/false

2、校验密码,并根据小写/大写字母，特殊符号，数字，返回强度

3、校验手机号格式

4、端口号，ip

....更多功能请自己测试

下面是我们的rex_check.js源码：

/**
 * 合法uri
 * 注意路径不要带localhost
 * @param {String} textval 当前url
 * @returns {Boolean}
 */
export const validateURL = (textval) => {
  const urlregex = /^(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 urlregex.test(textval)
}

/**
 * 小写字母
 * @param {String} str
 * @returns {Boolean}
 */
export const validateLowerCase = (str) => {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/**
 * 大写字母
 * @param {String} str
 * @returns {Boolean}
 */
export const validateUpperCase = (str) => {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/**
 * 大小写字母
 * @param {String} str
 * @returns {Boolean}
 */
export const validatAlphabets = (str) => {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

/**
 * EMAIL格式
 * @param {String} str
 * @returns {Boolean}
 */
export const validateIsEmail = (str) => {
  if (str.length != 0) {
    const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
    return reg.test(str);
  }
}

/**
 * 验证价格
 * @param {String || Number} str
 * @returns {Boolean}
 */
export const validatePrice = (str) => {
  const reg = /(^[1-9]([0-9]{1,4})?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
  return reg.test(str)
}

/**
 * 验证正整数
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateNum = (value) => {
  const reg = /^[1-9][0-9]*$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入正整数';
  return resultMsg;
}

/**
 * 验证4位正整数
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateNum4 = (value) => {
  const reg = /^0|[1-9][0-9]{0,3}$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入数字值且不大于4位';
  return resultMsg;
}

/**
 * 验证5位正整数
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateNum5 = (value) => {
  const reg = /^0|[1-9][0-9]{0,4}$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入数字值且不大于5位';
  return resultMsg;
}

/**
 * 验证1-7位数字加4位小数
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateNum7 = (value) => {
  const reg = /^(0|[1-9][0-9]{0,6})(\.[0-9]{1,4})?$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入数字值且不大于7位或最大四位小数';
  return resultMsg;
}

/**
 * 验证1-16位数字加2位小数
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateNum16 = (value) => {
  const reg = /^(0|[1-9][0-9]{0,13})(\.[0-9]{1,2})?$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入数字值且不大于14位或最大两位小数';
  return resultMsg;
}

/**
 * 验证1-18位数字加6位小数
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateNum18 = (value) => {
  const reg = /^(0|[1-9][0-9]{0,17})(\.[0-9]{1,6})?$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入数字值且不大于18位或最大六位小数';
  return resultMsg;
}

/**
 *验证9位正整数
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateNum9 = (value) => {
  const reg = /^0|[1-9][0-9]{0,9}$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入数字值且不大于10位';
  return resultMsg;
}

/**
 *验证12位正整数
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateNum12_6 = (value) => {
  const reg = /^(0|[1-9][0-9]{0,11})(\.[0-9]{1,6})?$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入数字值且不大于12位或最大六位小数';
  return resultMsg;
}

/**
 * 校验输入非中文
 * @param {String} value
 * @returns {Object}
 *  result：true 是中文
 */
export const noChinese = (value) => {
  const reg = /[\u4e00-\u9fa5]/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '基金代码不能输入汉字!';
  return resultMsg;
}

/**
 * 校验输入是否是带点数字
 * 1.5 || "1.5" || 1 (不带点也是true)
 * @param {String || Number} value
 * @returns {Object}
 */
export const inputNumberOrSpot = (value) => {
  const reg = /^\d+(?=\.{0,1}\d+$|$)/ ;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入正确的销售服务费费率!';
  return resultMsg;
}

/**
 * 校验输入是否是数字（包括正负、小数点）
 * @param {String || Number} value
 * @returns {Object}
 */
export const inputOrNumber = (value) => {
  const reg = /[-+]*[0-9][.][0-9]+|[-+]*[1-9][0-9]*|^[0]$/ ;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入数字';
  return resultMsg;
}

/**
 * 校验输入字符是否是路径格式
 * @param {String} value
 * @returns {Object}
 */
export const validateUrl = (value) => {
  const reg = /^[a-zA-Z]:(((\\(?! )[^/:*?<>\""|\\]+)+\\?)|(\\)?)\s*$/;
  let resultMsg = {};
  resultMsg.result = reg.test(value);
  resultMsg.message = '请输入正确的文件路径';
  return resultMsg;
}

/**
 * 大写金额转换
 * @param {Number} num
 * @returns {String}
 */
export const digitUppercase = (num) => {
  var tmpNum = num;
  var AA = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖");
  var BB = new Array("", "拾", "佰", "仟", "万", "亿", "元", "");
  var CC = new Array("角", "分", "厘");
  var a = ("" + num).replace(/(^0*)/g, "").split("."), k = 0, re = "";
  for (var i = a[0].length - 1; i >= 0; i--) {
    switch (k) {
      case 0:
        re = BB[7] + re;
        break;
      case 4:
        if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
          re = BB[4] + re;
        break;
      case 8:
        re = BB[5] + re;
        BB[7] = BB[5];
        k = 0;
        break;
    }
    if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
      re = AA[0] + re;

    if (a[0].charAt(i) != 0)
      re = AA[a[0].charAt(i)] + BB[k % 4] + re;
    k++;
  }
  if (a.length > 1) {// 加上小数部分(如果有小数部分)
    if (a[0].length == 0) {
      re += "";
    } else {
      re += BB[6];
    }
    for (var i = 0; i < a[1].length; i++) {
      re += AA[a[1].charAt(i)] + CC[i];
      if (i == 2)
        break;
    }
  }
  if (tmpNum.toString().indexOf(".") == -1) {
    re += "元整";
  }
  // 处理输入字符0的情况
  if (a == '') {
    re = "零" + re;
  }
  return re;
}

/**
 * 校验密码格式
 * 输入字符是否大于6位小于18位(包含数字||大小写字母||特殊字符) && 不能是中文字符
 * @param {String || Number} value
 * @returns {Object}
 * fail时：resultMsg.message == 报错
 * success:resultMsg.message == 1/2/3/4
 * 积分规则：(数字||大小写字母||特殊字符)
 *        任意一种 == 1
 *        任意两种 == 2
 *        任意三种 == 3
 *        任意四种 == 4
 */
export const validatePassworld = (value) => {
  const reg_length = /^.{6,18}$/;//校验他的长度6-18
  const reg_ts_zn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;//特殊字符，中文
  //加分条件
  const reg_num = /[0-9]/im;//判断是否有数字
  const reg_az = /[a-z]/;//判断是否有小写字母
  const reg_AZ = /[A-Z]/;//判断是否有大写字母
  const reg_ts = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;//特殊字符，英文
  let resultMsg = {};
  if(value==''||value==undefined||value==null){
    resultMsg.message = '密码不能为空';
    resultMsg.result = false;
  }else if(!reg_length.test(value)){
    resultMsg.message = '密码长度为6-18位';
    resultMsg.result = false;
  }else if(reg_ts_zn.test(value)){
    resultMsg.message = '密码不能包含中文特殊字符';
    resultMsg.result = false;
  }else{
    let grade = 0;
    if(reg_num.test(value)){//判断是否有数字
      grade++;
    }
    if(reg_az.test(value)){//判断是否有小写字母
      grade++;
    }
    if(reg_AZ.test(value)){//判断是否有大写字母
      grade++;
    }
    if(reg_ts.test(value)){//特殊字符，英文
      grade++;
    }
    resultMsg.message = grade;
    resultMsg.result = true;
  }
  return resultMsg;
}

/**
 * 是否邮箱
 * @param {String} value
 * @returns {Object}
 */
export const validateEMail = ( value ) => {
  const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
  let resultMsg = {};
  if(value==''||value==undefined||value==null){
    resultMsg.message = '邮箱地址不能为空';
    resultMsg.result = false;
  }else{
    if ((!reg.test(value)) && value != '') {
      resultMsg.message = '请输入正确的邮箱地址';
      resultMsg.result = false;
    } else {
      resultMsg.result = reg.test(value);
    }
  }
  return resultMsg;
}

/**
 * 是否身份证号码
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateIdNo = ( value ) => {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  let resultMsg = {};
  if(value==''||value==undefined||value==null){
    resultMsg.message = '身份证号码不能为空';
    resultMsg.result = false;
  }else {
    if ((!reg.test(value)) && value != '') {
      resultMsg.message = '请输入正确的身份证号码';
      resultMsg.result = false;
    } else {
      resultMsg.result = reg.test(value);
    }
  }
  return resultMsg;
}

/**
 * 手机号格式
 * 2019.11.13更新2019版本
 * 移动号段: 13[4-9],147,148,15[0-2,7-9],165,170[3,5,6],172,178,18[2-4,7-8],19[5,8]
   联通号段: 130,131,132,145,146,155,156,166,167,170[4,7,8,9],171,175,176,185,186
   电信号段: 133,149,153,162,170[0,1,2],173,174[0-5],177,180,181,189,19[1,3,9]
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateIsPhone = (value) => {
  const reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
  if(value==''||value==undefined||value==null){
    resultMsg.message = '手机号码不能为空';
    resultMsg.result = false;
  }else {
    if ((!reg.test(value)) && value != '') {
      resultMsg.message = '请输入正确的电话号码';
      resultMsg.result = false;
    } else {
      resultMsg.result = reg.test(value);
    }
  }
  return resultMsg;
}

/**
 * 是否固话
 * 010-1234567
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateTelphone = ( value ) => {
  const reg =/0\d{2}-\d{7,8}/;
  let resultMsg = {};
  if(value==''||value==undefined||value==null){
    resultMsg.message = '固话号码不能为空';
    resultMsg.result = false;
  }else {
    if ((!reg.test(value)) && value != '') {
      resultMsg.message = '请输入正确的固话（格式：区号+号码,如010-1234567）';
      resultMsg.result = false;
    } else {
      resultMsg.result = reg.test(value);
    }
  }
  return resultMsg;
}

/**
 * 是否手机号码或者固话
 * 移动号段: 13[4-9],147,148,15[0-2,7-9],165,170[3,5,6],172,178,18[2-4,7-8],19[5,8]
   联通号段: 130,131,132,145,146,155,156,166,167,170[4,7,8,9],171,175,176,185,186
   电信号段: 133,149,153,162,170[0,1,2],173,174[0-5],177,180,181,189,19[1,3,9]
   010-1234567
 * @param {String || Number} value
 * @returns {Object}
 */
export const validatePhoneTwo = ( value ) => {
  const reg = /^((0\d{2,3}-\d{7,8})|(1[345678]\d{9}))$/;
  let resultMsg = {};
  if(value==''||value==undefined||value==null){
    resultMsg.message = '输入内容不能为空';
    resultMsg.result = false;
  }else {
    if ((!reg.test(value)) && value != '') {
      resultMsg.message = '请输入正确的电话号码或者固话号码';
      resultMsg.result = false;
    } else {
      resultMsg.result = reg.test(value);
    }
  }
  return resultMsg;
}

/**
 * 是否端口号
 * @param {String || Number} value
 * @returns {Object}
 */
export const validatePort = ( value ) => {
  const reg = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
  let resultMsg = {};
  if(value==''||value==undefined||value==null){
    resultMsg.message = '端口号不能为空';
    resultMsg.result = false;
  }else {
    if ((!reg.test(value)) && value != '') {
      resultMsg.message = '端口号格式不正确, 例如:8080';
      resultMsg.result = false;
    } else {
      resultMsg.result = reg.test(value);
    }
  }
  return resultMsg;
}

/**
 * 是否ip地址
 * @param {String || Number} value
 * @returns {Object}
 */
export const validateIP = ( value ) => {
  const reg = /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/
  let resultMsg = {};
  if(value==''||value==undefined||value==null){
    resultMsg.message = 'ip不能为空';
    resultMsg.result = false;
  }else {
    if ((!reg.test(value)) && value != '') {
      resultMsg.message = 'ip格式不正确, 例如:192.168.0.1';
      resultMsg.result = false;
    } else {
      resultMsg.result = reg.test(value);
    }
  }
  return resultMsg;
}

 

浩星
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十一：通用表单组件封装实现
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
09-01 1184
本章实现通用表单组件，根据实体配置识别实体属性，并自动生成编辑组件，实现对应数据填充、校验及保存等逻辑。
vue+elementui实现动态生成form 配置相关json即可生成form
为啥不能换名字的博客
07-24 6112
组件目录 form.vue <template> <el-form @submit.native.prevent class="dynamic-form" :ref="formConfig.ref" :inline="formConfig.inline" :model="value" ...
Vue密码强度
06-01
使用Vue实现的密码强度显示效果
密码复杂度检查的正则表达式
知止不殆
04-25 6499
<br />一， 密码最少长度为 6位 ，并至少包含3种复杂类别的字符 （如 Abc134 或者 abc12# 符合 如abc123 123 <>( 就不符合） <br />二  密码最少长度为 8位 ，并至少包含2种复杂类别的字符 （如 Abc21334 或者 abcd1234 符合 如12345678 abcdefg就不符合） <br />三， 密码的复杂类别由拉丁、西里尔或希腊字母组成 <br />复杂类别说明 <br />1 大写字母 如:A B C....Z <br />2 小写字母 如:a b
vue2密码正则
最新发布
kukuqiao的博客
07-18 166
【代码】vue2密码正则。
vue form表单密码校验(正则表达式)
Zero
05-14 3151
必须包含四种的组合密码 var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}/ var isValid = passwordreg.test(this.user.newPassword); if(isValid != true){ this.msgError("密码必须是大写字母，小写字母，数字，特殊字符组成，且长度为8到12位！"); return; } 必须包含四种中三种的组合校验 v
vue密码正则验证表单验证_如何在Vue中使用表单验证
08-14 4935
vue密码正则验证表单验证 介绍 (Introduction) Almost every web application makes use of forms in some way, as such developers always have to tackle form validations. If you are a new developer, it can be hard decid...
正则表达式判断密码强度
05-25
正则表达式判断密码强度是否符合标准，此处具有大小写，特殊字符，数字判断。对密码周期也进行判断。
Vue+Django(DRF)独立开发电商项目
github_38596081的博客
10-15 4126
基础篇 django-orm操作 进阶操作 获取个数 # models.Tb1.objects.filter(name='seven').count() 大于，小于 # models.Tb1.objects.filter(id__gt=1) 获取id大于1的值 models.Tb1.objects.filter(id__gte=1) 获...
springboot+vue项目笔记--登录
piaok_yumian的博客
04-20 630
vue简单登录页面即跳转逻辑 vue：login.vue <template> <div class="login-wrap"> <div class="ms-title">music 后台管理登录</div> <div class="ms-login"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-fo
关于VUE项目根据后台返回的手机号和身份证号做正则校验
weixin_45132984的博客
06-24 619
首先将后端返回的数据取到 我的后端数据是通过事件去回调得到的 // 触发****按钮 handleEntry (type, item, title) { //将获取到手机号和身份证号数据赋值给变量方便后续使用 const a = item.mcPartyPerson.idcard const b = item.mcPartyPerson.phone // 手机号正则表达式 var regphone = /(^1\d{10}$)|(^[0-
vue.js表单密码强度验证代码.zip
07-04
vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。
vue2.0用户名密码验证
08-15
vue2.0用户名密码验证
vuepassword一个Vuejs密码输入组件支持显示和强度计算
08-08
一个Vue.js密码输入组件，包括一个切换显示密码和使用Dropbox zxcvbn库实现的强度计
vue项目中更改密码并验证
qq_42786138的博客
09-03 1174
data() { //此处即表单发送之前验证 let validateNewPassword = (rule, value, callback) => { if (value === this.form.password) { callback(new Error('新密码不能与原密码相同!')) } else { callback()...
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项_vue rules 正则
2301_82243626的博客
05-09 886
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
密码强度校验，vue
weixin_44191425的博客
08-05 885
效果图 <template> <a-modal v-model="showModal" title="修改密码" @cancel="cancel"> <a-row> <a-form :form="form"> <a-form-item> <a-input-password v-decorator="[ 'vscode',
Vue-elementUI+正则实现，密码必须是6位以上、必须含有字母和数字且至少一个特殊符号
gjxcool的博客
12-01 1074
Vue-elementUI+正则实现，密码必须是6位以上、必须含有字母和数字且至少一个特殊符号
vue+ts正则验证手机号
06-12
你可以使用Vue.js和TypeScript来实现手机号验证。具体实现方法如下： 1. 在Vue组件中定义手机号变量和验证规则： ``` import { Component, Vue } from 'vue-property-decorator'; import { required, minLength, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值