前端常用正则

常用正则

js 复制代码
/**
 * URL地址
 * @param {*} s
 */
export function isURL(s) {
  return /^http[s]?:\/\/.*/.test(s)
}

/** 正整数 */
export const intergerRE = /^\d*$/

/** 小数、包含正整数、开头只能为一个零 */
export const decimalRE = /^(0|[1-9]\d*)(\.\d*)?$/

/** 手机号码 */
export const mobileRE = /^1[3456789]\d{9}$/
/** 座机 */
export const landlineRE = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/
/** 邮编 */
export const postcodeRE = /^[1-9]\d{5}$/
/** 传真 */
export const faxRE = /^(\d{3,4}-)?\d{7,8}$/
/** 电子邮箱 */
export const emailRE = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
/** 信用代码 */
export const creditCodeRE = /^[A-Z0-9]{18}$/
/** 英文名称 */
export const englishName = /^[a-zA-Z&.,\'\/\\\-\_\(\)\s]+$/g

其他扩展

js 复制代码
//  12个字符,保留2位小数,比如用于金额
// 有负数
const decimalLimitReg = /^(0|[-1-9]\d{0,11})(\.\d{0,2})?$/
// 无负数
const decimalLimitReg = /^(0|[1-9]\d{0,11})(\.\d{0,2})?$/

校验规则配置Rules

用于表单的校验

如下使用

html 复制代码
<FormItem label="手机号" :rule="ruleConf.mobile"></FormItem>
js 复制代码
/**
 * 校验规则配置
 */
export const ruleConf = {
  /** 必填 */
  required: {
    required: true,
    message: '这是必填项,请输入',
  },
  // 有可能数据要校验,但不是必填的
  // 所以以下校验都没有加必填标识
  /** 手机号码 */
  mobile: {
    message: '手机号码格式不正确',
    pattern: mobileRE,
  },
  /** 手机+座机 */
  phone: {
    message: '电话号码格式不正确',
    validator(rule, value) {
      // 不在这里验证必填
      if (isEmpty(value)) {
        return [];
      }
      if (mobileRE.test(value) || landlineRE.test(value)) {
        return [];
      }
      return [new Error(isFunction(rule.message) ? rule.message() : rule.message)];
    },
  },
  /** 邮政编码 */
  postcode: {
    message: '邮政编码格式不正确',
    pattern: postcodeRE,
  },
  /** 信用代码 */
  creditCode: {
    message: '信用代码格式不正确',
    pattern: creditCodeRE,
  },
  /** 邮箱 */
  email: {
    message: '邮箱格式不正确,请重新输入',
    pattern: emailRE,
  },
  url: {
    pattern: urlRE,
    message: 'url地址输入不正确,请重新输入',
  },
  httpURL: {
    message: '请输入以http开头的URL地址',
    validator(rule, value) {
      const _value = trim(value);
      if (!_value || urlRE.test(_value)) {
        return [];
      }
      return [new Error(isFunction(rule.message) ? rule.message() : rule.message)];
    },
  },
  httpsURL: {
    message: '请输入以https://开头的URL地址',
    validator(rule, value) {
      const _value = trim(value);
      if (!_value || httpsUrlRE.test(_value)) {
        return [];
      }
      return [new Error(isFunction(rule.message) ? rule.message() : rule.message)];
    },
  },
  /** 中文 */
  chinese: {
    pattern: chineseRE,
    message: '仅支持输入中文',
  },
  /** 仅支持输入英文 */
  english: {
    pattern: englishRE,
    message: '仅支持输入英文',
  },
  /** 中文+字母+数字 (仅可输入中文、字母、数字,不支持特殊字符) */
  chineseAlphabetNumber: {
    message: '仅可输入中文、字母、数字,不支持特殊字符',
    pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
  },
  packageNameRE: {
    message: '仅可填写大小写字母、数字、下划线等,可用英文句号分隔,隔开的每一段必须以字母开头',
    pattern: packageNameREV2,
  },
  /** 中文+字母 (仅可输入中文、字母,不支持特殊字符、数字) */
  chineseAlphabet: {
    message: '仅可输入中文、字母',
    pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
  },
  /** 中文+字母+数字+下划线 (仅可输入中文、字母、数字,下划线,不支持特殊字符) */
  chineseAlphabetNumberUnderline: {
    message: '仅可输入中文、字母、数字、下划线,,不支持特殊字符',
    pattern: /^[a-zA-Z0-9\u4e00-\u9fa5\_]+$/,
  },
  alphabetNumberUnderline: {
    message: '仅可输入字母、数字,下划线,不支持特殊字符',
    pattern: alphabetNumberUnderlineReg,
  },

  /** 正整数数字 */
  number: {
    pattern: intergerRE,
    message: '仅支持输入数字',
  },
};
相关推荐
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务4 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66686 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER6 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰6 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js