前端常用正则

常用正则

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: '仅支持输入数字',
  },
};
相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架