JS封装常用的正则表达函数库（格式化）

最新推荐文章于 2024-04-13 01:42:20 发布
最新推荐文章于 2024-04-13 01:42:20 发布
阅读量653 收藏 3
点赞数 2
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44791115/article/details/105815929
版权

vue项目可自建util.js函数库，存放一些常用的工具函数，记录下开发中经常会用到的一些正则校验吧~

  1. import引入vue，等封装完正则的方法后将它挂载到vue的原型上
import Vue from "vue";
  1. 将对象中若干个函数方法赋值给定义好的common常量：
const common = {
  /**
   * 说明：检验一些常用正则的格式 
   * @param type: 检验的类型
   * @param value: 检验的值
   * @param msg: 检验的是什么
   * @width width 压缩后图片宽度
   * @param callback: 回调函数，检验成功则直接执行回调，不成功则携带错误信息去执行回调
   */
  checkFormat( type, value, msg, callback){
    if (value === '') {
      callback(`${msg}不可为空`);
      return;
    } 
    switch(type){
      case 'isInt':
        /^[1-9]+/.test(value) ? callback() : callback('请输入正整数');
        break;
      case 'Email':
        let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        regEmail.test(value) ? callback() : callback('请输入有效的邮箱格式');
        break;
      case 'MobilePhone':
        //13、14、15、17、18开头的11位手机号
        /^1[34578]\d{9}$/.test(value) ? callback() : callback('请输入有效的手机号码'); 
        break;
      case 'Phone':
        // 格式：xxx-xxxxxxx、xxx-xxxxxxxx、xxxx-xxxxxxx、xxxx-xxxxxxxx
        /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,8}$/.test(value) ? callback() : callback('请输入有效的电话号码');
        // 检验国内电话号码 xxx-xxxxxxxx xxxx-xxxxxxx
        // /\d{3}-\d{8}|\d{4}-\d{7}/.test(value) ? callback() : callback('请输入有效的国内电话号码');
        break;
      case 'Username':
        // /^[a-zA-Z0-9_-]{4,16}$/.test(value) ? callback() : callback('请输入4到16位用户名（可由字母，数字，下划线，减号组成)');
        /^[a-zA-Z0-9]+$/.test(value) ? callback() : callback('只允许输入由字母或数字组成的用户名)');
        break;
      case 'Card':
       // 检验：身份证号码开头是14位或者17位数字，结尾可以是数字或者是x或者是X
       /^(\d{14}|\d{17})(\d|[xX])$/.test(value) ? callback() : callback('请输入正确的身份证号'); 
        break;
      case 'Number':
        /^([1-9][0-9]*)+(.[0-9]{1,2})?$/.test(value) ? callback() : callback('请输入非零开头的最多带两位小数的数字');
        break;
      case 'Account':
        /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(value) ? callback() : callback('请输入以字母开头的5-16位账号（允许字母数字下划线）');
        break;
      case 'Password':
        /^[a-zA-Z]\w{5,17}$/.test(value) ? callback() : callback('请输入6-18位以字母开头的密码(只可包含字母、数字和下划线)');
        // /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/..test(value) ? callback() : callback('请输入8-10位包含大小写字母和数字的密码（不能使用特殊字符）');
        break;
      case 'ChinaWord':
        /^[\u4E00-\u9FA5]+$/.test(value) ? callback() : callback('只允许输入中文字符');
        // /^[\u4E00-\u9FA5]{2,4}$/.test(value) ? callback() : callback('请输入2-4位中文字符');
        break;
      case 'Price':
        let regPrice =  /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
        regPrice.test(value) ? callback() : callback('请输入整数或者保留两位小数的价格');
        break;
      case 'Date':
        // 检验日期格式 xxxx-xx-xx
        let regDate = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
        regDate.test(value) ? callback() : callback('请输入正确的日期格式，例：2020-01-01');
        break;
      case 'Month':
        //(01～09和1～12) --> 输入的格式只能是01~09（？代表0至多出现一次）或者10-12
        /^(0[1-9]|1[0-2])$/.test(value) ? callback() : callback('请输入正确的月份，例：01或12');
        break;
      case 'Day':
        /^((0[1-9])|((1|2)[0-9])|30|31)$/.test(value) ? callback() : callback('请输入正确的日期，例：01或31');
        break;
      case 'Url':
        let regUrl = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
        regUrl.test(value) ? callback() : callback('请输入正确的URL');
        break;
      case 'IPv4':
        let regIPv4 =  /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        regIPv4.test(value) ? callback() : callback('请输入正确的IPv4地址');
        break;
      case 'Car':
        let regCar = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
        regCar.test(value) ? callback() : callback('请输入正确的车牌号');
        break;
    }
  },

  /*删除空白字符*/
  deleteWhitespace(input){
    return input.replace(/\s+/g, '');
  },
  
  /* 将阿拉伯数字翻译成中文的大写数字 */
  numberToChinese (num) {
    var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
    var BB = 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){
      re += BB[6];
      for(var i = 0; i < a[1].length; i++)
        re += AA[a[1].charAt(i)];
    }
    if(re == '一十')
        re = "十";
    if(re.match(/^一/) && re.length == 3)
        re = re.replace("一", "");
    return re;
  },


  /*将数字转换为大写金额（请输入框限制至多保留2位小数）*/ 
  changeToChinese (Num) {
    //判断如果传递进来的不是字符的话转换为字符
    if(typeof Num == "number") {
      Num = new String(Num);
    };
    Num = Num.replace(/,/g, "");//替换tomoney()中的“,”
    Num = Num.replace(/ /g, ""); //替换tomoney()中的空格
    Num = Num.replace(/￥/g, ""); //替换掉可能出现的￥字符
    if(isNaN(Num)) { //验证输入的字符是否为数字
      //alert("请检查小写金额是否正确");
      return "";
    };
    //字符处理完毕后开始转换，采用前后两部分分别转换
    var part = String(Num).split(".");
    var newchar = "";
    //小数点前进行转化
    for(var i = part[0].length - 1; i >= 0; i--) {
      if(part[0].length > 10) {
          return "";
          //若数量超过拾亿单位，提示
      }
      var tmpnewchar = "";
      var perchar = part[0].charAt(i);
      switch(perchar) {
        case "0":
          tmpnewchar = "零" + tmpnewchar;
          break;
        case "1":
          tmpnewchar = "壹" + tmpnewchar;
          break;
        case "2":
          tmpnewchar = "贰" + tmpnewchar;
          break;
        case "3":
          tmpnewchar = "叁" + tmpnewchar;
          break;
        case "4":
          tmpnewchar = "肆" + tmpnewchar;
          break;
        case "5":
          tmpnewchar = "伍" + tmpnewchar;
          break;
        case "6":
          tmpnewchar = "陆" + tmpnewchar;
          break;
        case "7":
          tmpnewchar = "柒" + tmpnewchar;
          break;
        case "8":
          tmpnewchar = "捌" + tmpnewchar;
          break;
        case "9":
          tmpnewchar = "玖" + tmpnewchar;
          break;
      }
      switch(part[0].length - i - 1) {
        case 0:
          tmpnewchar = tmpnewchar + "元";
          break;
        case 1:
          if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
          break;
        case 2:
          if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
          break;
        case 3:
          if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
          break;
        case 4:
          tmpnewchar = tmpnewchar + "万";
          break;
        case 5:
          if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
          break;
        case 6:
          if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
          break;
        case 7:
          if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
          break;
        case 8:
          tmpnewchar = tmpnewchar + "亿";
          break;
        case 9:
          tmpnewchar = tmpnewchar + "拾";
          break;
      }
      var newchar = tmpnewchar + newchar;
    }
    //小数点之后进行转化
    if(Num.indexOf(".") != -1) {
      if(part[1].length > 2) {
        // "小数点之后只能保留两位,系统将自动截断"
        part[1] = part[1].substr(0, 2)
      }
      for(i = 0; i < part[1].length; i++) {
        tmpnewchar = "";
        perchar = part[1].charAt(i);
        switch(perchar) {
          case "0":
            tmpnewchar = "零" + tmpnewchar;
            break;
          case "1":
            tmpnewchar = "壹" + tmpnewchar;
            break;
          case "2":
            tmpnewchar = "贰" + tmpnewchar;
            break;
          case "3":
            tmpnewchar = "叁" + tmpnewchar;
            break;
          case "4":
            tmpnewchar = "肆" + tmpnewchar;
            break;
          case "5":
            tmpnewchar = "伍" + tmpnewchar;
            break;
          case "6":
            tmpnewchar = "陆" + tmpnewchar;
            break;
          case "7":
            tmpnewchar = "柒" + tmpnewchar;
            break;
          case "8":
            tmpnewchar = "捌" + tmpnewchar;
            break;
          case "9":
            tmpnewchar = "玖" + tmpnewchar;
            break;
        }
        if(i == 0) tmpnewchar = tmpnewchar + "角";
        if(i == 1) tmpnewchar = tmpnewchar + "分";
        newchar = newchar + tmpnewchar;
      }
    }
    //替换所有无用汉字
    while(newchar.search("零零") != -1)
      newchar = newchar.replace("零零", "零");
      newchar = newchar.replace("零亿", "亿");
      newchar = newchar.replace("亿万", "亿");
      newchar = newchar.replace("零万", "万");
      newchar = newchar.replace("零元", "元");
      newchar = newchar.replace("零角", "");
      newchar = newchar.replace("零分", "");
      if(newchar.charAt(newchar.length - 1) == "元") {
        newchar = newchar + "整"
      }
      return newchar;
  },

  // 价格格式化-四舍五入保留两位小数，不足两位小数补零
  formatPrice(money, precision=2) {
    if (money == undefined || isNaN(money))
      return "";    
    var symbol = 1
    if (money < 0) {
      // 符号为负
      symbol = -1
      money *= -1
    }
    var num2 = (Math.round(money * Math.pow(10, precision))
      / Math.pow(10, precision) + Math.pow(10, -(precision + 1)))
      .toString().slice(0, -1)

    return parseFloat(num2 * symbol).toFixed(precision);
  }
}
  1. 将common对象挂载到vue原型上，方便在组件内使用：
Vue.prototype.$common = common;
  1. 写完后可以测试检验一下，例：
<template>
  <div>
    测试页面1
    <el-input v-model="username" @blur="checkValue"></el-input>
    {{ this.value }}
  </div>
</template>
<script>
export default {
  name:"test1",
  data(){
    return{
      username: '',
      value:''
    }
  },
  methods:{
    checkValue(){
      this.$common.validateUserName(this.username, res => {
        this.value = res; 
      });
    }
  }
}
</script>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
就酱紫，正则校验在开发中经常有些使用场景会用到，文里有些方法是参考网上一些前辈的，我只是简单测试了一下，有再发现错误的小伙伴帮忙指出一下，thanks~

Hsu yiqi
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
rexlib:node.js 的正则表达式库
06-25
重物 node.js 的正则表达式库 安装 $ npm install relib or $ npm install relib --save 用法 var relib = require ( 'relib' ) ; relib . ip . is ( '192.168.0.1' ) ; // true relib . ip . is ( '1:2:3:4:5:6:7:8' ) ; // true relib . domain . is ( 'github.com' ) ; // true relib . domain . is ( 'domain' ) ; // false 或者 var ip = require ( 'relib' ) . ip ; ip . is ( '192.168.0.1' ) ; // true ip . is ( '1:2:3:4:5:6:7:8' )
JavaScript学习笔记_js常用函数封装_js包.zip
11-04
例如，你可能会发现`tool.js`中有如数组处理、日期格式化、字符串操作等函数，这些都是在开发中经常会用到的实用工具。 其次，`笔记.txt`可能是作者整理的学习笔记，记录了JavaScript的基础语法、对象、数组、函数...
js正则库
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
09-07 236
【代码】js正则库。
工作中遇到的el-form表单校验
weixin_41223530的博客
12-30 637
工作中遇到的el-form表单校验
js常用正则大全
NstarZ的博客
06-08 1249
js 正则，
【JavaScript_2】语法、标准库、正则表达式
天赋决定上限，努力决定下限！
07-05 381
语法、标准库、正则表达式
JS日期格式化
12-01
这个文件可能包含一个函数或者类，用于封装一些日期格式化的方法，提供更方便的API给开发者使用。 了解以上知识点后，你就能更好地处理JavaScript中的日期格式化问题，无论是简单的格式化需求还是复杂的国际化日期...
Utiljs一些很实用的javaScript函数封装集合
08-12
Util.js 是一个非常实用的JavaScript库，它封装了一系列常见的功能函数，旨在简化开发过程，提高代码的可复用性和效率。这个库涵盖了多种类别，包括处理数组、浏览器特性、日期操作、函数辅助、数学计算、媒体操作、...
javascript-library:我的有用 JavaScript 函数库
06-14
总的来说，"我的有用 JavaScript 函数库"是一个个人或团队分享的JavaScript工具集，旨在提高开发效率，通过预编写和封装的函数解决常见的编程需求。这个库可能包括了各种实用功能，采用模块化设计，并且有完整的文档...
封装JavaScript常用类库.rar
05-21
压缩包中的`封装JavaScript常用类库.txt`可能包含了这些库的使用说明、示例代码或者类库的源码。开发者可以通过阅读和学习这些内容，快速理解和应用到自己的项目中，提升代码质量，降低维护成本。 总之，封装...
前端JS常用正则大全，全网最全正则表达式
qq_35469342的博客
09-30 447
最全正则表达式 export default { /*大于0小于100数字*/ validateNumber: function validateNumber(val) { const reg = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/; return reg.test(val); }, validdateMobile: function val.
javascript正则验证库
开心就好！
09-01 170
一、清除空格 以下javascript代码收集于网友创作,功能类似于C#中的Trim函数。 String.prototype.trim = function()//去除空格 { return this.replace(/(^[\s]*)|([\s]*$)/g, ""); }   二、检查一个字符串是否包含特殊字符 /* 功能：...
js正则表达式库
暮色里的山羊
07-14 1103
/** * js正则表达式库--Regs.js * by denghao.me @邓浩 * @date 2017-02-11 18:09:35 * @用法: RegsLib.en.test('abc') -> true */ var RegsLib = { /* * 数字相关 */ //正数（可含小数、0） posiNum: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, //正整数 pos
js常用正则 验证数字正则
最新发布
2401_84092423的博客
04-13 922
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
工具库 --- Validator (JS正则)
weixin_34049032的博客
03-22 470
工具库 --- Validator 今天写的是一个正则验证类 单例模式 工具库地址：github.com/WeForStudy/… npm地址：www.npmjs.com/package/slm… 单例模式 减少不必要的对象生存，减少资源的占用 由于只需要new一次，项目中其他项目共用一个对象 静态属性 instance --> private 静态方法getInstance...
JS项目中使用到的正则封装（邮箱，正整数，手机号码，身份证号码，银行卡号）
qq_36881424的博客
09-15 406
http://blog.rziqee.cn/index.php/article/7.html
日期格式化正则 20022-06-04
y1377593732的博客
06-04 223
日期格式化正则，用以分析日期字符串，本文主题为正则，vue和js只是示例的展示工具。
js验证表单大全
333
02-17 239
js验证表单大全 1. 长度限制 &lt;script&gt; function test() { if(document.a.b.value.length&gt;50) { alert("不能超过50个字符！"); document.a.b.focus(); return false; } } &lt;/script&gt; &lt;form name=a onsubmit="return te...
JavaScript模块化：解决全局冲突与文件依赖
"模块化的js.pdf 是一份PDF文档，由葛亮@焦点科技撰写，主要探讨JavaScript的模块化开发问题及解决方案。文档内容包括JavaScript开发的挑战、模块化的概念、模块化的实现原理、实例分析以及最后的总结。" 在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值