前端常用正则-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端常用正则。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

常用正则


/**
 * 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

其他扩展

//  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

用于表单的校验

如下使用文章来源地址https://www.toymoban.com/news/detail-583354.html

<FormItem label="手机号" :rule="ruleConf.mobile"></FormItem>

/**
 * 校验规则配置
 */
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: '仅支持输入数字',
  },
};