封装正则验证

426 阅读1分钟

1、创建正则文件

在自己的项目文件中创建对应的正则验证的js文件

image.png

2、定义自己要使用的正则

export default {
  test(name, aaa) {
    aaa = aaa.trim();
    let obj = {
      //手机号
      mobile:
        /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      //密码大小写区分,若有需要,在/  末尾添加对应的位数...{8}区间则为{8,12}/
      //纯数字
      passWord_num: /\d/,
      //小写字母
      passWord_min: /[a-z]/,
      //大写字母
      passWord_max: /[A-Z]/,
      //特殊字符
      passWord_spe: /\W/,
      //包含大小写字母,数字,特殊字符
      passWord_dreg: /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])/,
      //包含任意三种
      passWord_three:
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]$/,
      //一代身份证号
      idCard_one: /^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$/,
      //二代身份证号
      idCard_two:
        /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/,
      //一二代身份证号
      idCard_all:
        /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
      //邮箱验证
      email:
        /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      //银行卡号
      bank_Id: /^([1-9]{1})(\d{15}|\d{18})$/,
      //护照
      passport:
        /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/,
      //网址
      webUrl:
        /^((https?|ftp|http):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})(\/\w\.-]*)*\/?/,
      //QQ号
      qqNumber: /^[1-9][0-9]{4,10}$/,
      //中文姓名
      chinaName: /^([\u4e00-\u9fa5·]{2,16})$/,
      //英文姓名
      engName: /(^[a-zA-Z]{1}[a-zA-Z\s]{0,20}[a-zA-Z]{1}$)/,
      //邮政编码
      postalCode:
        /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/,
      //日期
      data: /^(?:(?!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)$/,
      //html标签
      html: /<(.*)>.*<\/\1>|<(.*) \/>/,
      //微信号
      wxCode: /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/,
      //不包含字母
      notletter: /^[^A-Za-z]*$/,
      //16进制颜色
      sixteenColor: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,
      
    };
    for (let demo in obj) {
      if (demo == name) {
        if (obj[demo].test(aaa)) {
          return true;
        } else {
          return false;
        }
      }
    }
  },
};

3、在自己要使用的地方引入,或直接全局注册

在项目中的main.js

import test from "./component/regular/regular.js";
Vue.prototype.test = test;

4、使用

image.png

示例为验证手机号码。当输入不为手机号格式,返回false

image.png

输入格式正确时,返回true

image.png