整理项目中经常用到的正则

雨季mo浅忆

已于 2024-05-29 14:53:34 修改

阅读量697

点赞数 9

分类专栏：前端文章标签：前端正则表达式

于 2024-05-11 23:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_58099903/article/details/138722977

版权

前端专栏收录该内容

157 篇文章 29 订阅

订阅专栏

项目中难免会经常使用到表单，而表单项校验就需要用到正则，

所以整理总结一下自己项目中使用比较频繁的一些正则校验逻辑。

正则表达式 是由一些具有特殊含义的字符组成的字符串，多用于查找、替换符合规则

的字符串。在表单验证、Url映射等处都会经常用到。

在写正则表达式的时候，我们需要把模式写入一对 / / 正斜杠里面
/正则表达式/匹配模式

1、手机号码

/**
 * 手机号码正则
 * @param {string} phone
 * @returns {Boolean}
 */
export function validPhone(phone) {
  // const reg = /^1[3456789]\d{9}$/;
  const reg =
    /^\s{0}$|(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  return reg.test(phone);
}

2、Email 邮箱

/**
 * Email 邮箱正则
 * @param {string} phone
 * @returns {Boolean}
 */
export function validEmail(emial) {
  const reg =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return reg.test(emial);
}

3、QQ 号码

/**
 * QQ 号码
 * @param {string} QQ
 * @returns {Boolean}
 */
export function validQQ(QQ) {
  const reg = /^[1-9][0-9]{4,10}$/;
  return reg.test(QQ);
}

4、非零正整数

/**
 * 非零的正整数
 * @param {string} integer
 * @returns {Boolean}
 */
export function validInteger(integer) {
  const reg = /^[1-9]\d*$/;
  return reg.test(integer);
}

5、URL 地址

/**
 * url 地址
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(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);
}

6、身份证号

/**
 * 身份证号
 * @param {string} id
 * @returns {Boolean}
 */
export function validId(id) {
  const reg =
    /^[1-9][0-9]{5}(18|19|([23][0-9]))[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9Xx]$/gm;
  return reg.test(id);
}

7、只能输入中文和英文

<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5a-zA-Z\s]/g,'')">

8、银行卡号的校验

const checkBankNumber1: any = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback();
  } else {
    const reg = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18})$/;
    if (reg.test(value)) {
      callback();
    } else {
      return callback(new Error('请输入正确的银行卡号'));
    }
  }
};

9、开户行非必填时验证长度

const bankAddress1fn: any = (rule: any, value: any, callback: any) => {
  let lengths: number = 0;
  if (!value) {
    callback();
  } else {
    lengths = String(value).replace(/[^\u0000-\u00ff]/g, 'aa').length;
    if (lengths > 100) {
      return callback(new Error('最多输入100个字母或者50个汉字'));
    } else {
      callback();
    }
  }
};

10、

推荐小白观看文章：

正则表达式 _ 基础版

元字符   描述
. 查找单个字符，除了换行和行结束符
\w   查找单词字符
\W   查找非单词字符
\d   查找数字
\D   查找非数字字符
\s   查找空白字符
\S   查找非空白字符
\b   匹配单词边界
\B   匹配非单词边界
\0   查找 NUL字符
\n   查找换行符
\f   查找换页符
\r   查找回车符
\t   查找制表符
\v   查找垂直制表符
\xxx   查找以八进制数 xxxx 规定的字符
\xdd   查找以十六进制数 dd 规定的字符
\uxxxx   查找以十六进制 xxxx规定的 Unicode 字符

重复类量词列表
量词   描述
n+   匹配任何包含至少一个 n 的字符串
n*   匹配任何包含零个或多个 n 的字符串
n?   匹配任何包含零个或一个 n 的字符串
n{x}   匹配包含 x 个 n 的序列的字符串
n{x,y}   匹配包含最少 x 个、最多 y 个 n 的序列的字符串
n{x,}   匹配包含至少 x 个 n 的序列的字符串

JavaScript 正则表达式支持的边界量词
量词   说明
^   匹配开头，在多行检测中，会匹配一行的开头
$   匹配结尾，在多行检测中，会匹配一行的结尾

终于码完辣！你学废了吗？码字不易，大家多多点赞支持！

会持续更新的， Loading。。。