前端常用的一些正则表达式

在线测试正则的网址：https://regexr.com/

1、正整数
/[^1-9]/、 /\D/
正整数不仅需要判断当前输入的全是数字，还需要保证第一位数字不是0
具体使用方式：

直接在方法中写的话：

<el-input v-model="ruleForm.value" placeholder="正整数" @input="inputEvent"></el-input>
inputEvent() {
if (this.ruleForm.value.length == 0) {
  this.ruleForm.value = this.ruleForm.value.replace(/[^1-9]/g,'')
} else {
  this.ruleForm.value = this.ruleForm.value.replace(/\D/g,'')
}
  
}

配合vue使用时，可以直接在input标签中绑定input事件
注意：v-model绑定的参数名是啥，input事件中对应的参数名就叫啥，不然可能会出问题

<el-input v-model="ruleForm.value" placeholder="正整数" @input="ruleForm.value.length == 1 ? ruleForm.value=ruleForm.value.replace(/[^1-9]/g,'') : ruleForm.value = ruleForm.value.replace(/\D/g,'')"></el-input>

2、大于0整数或者保留两位数的小数
d*(.?\d{0,2})
注意事项和写法同上

<el-input v-model="ruleForm.value" placeholder="0.00" @input="ruleForm.couponPrice=ruleForm.value.match(/^\d*(\.?\d{0,2})/g)[0]"></el-input> 

3、只允许输入数字和.
[^\d.]+

this.ruleForm.value = this.ruleForm.value.replace(/[^\d^\.]+/g,'')

4、组合----限制小数位两位，整数位11位

此方法可实现只能输入正数，限制两位小数，整数位限制11位，同时避免了首位非数字以及同时存在多个.的bug

this.ruleFrom.value = this.ruleFrom.value.toString().replace(/^\./g, '')// 确认第一位为数字
this.ruleFrom.value = this.ruleFrom.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".")
this.ruleFrom.value = this.ruleFrom.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); // 此条$1、$2、$3都代表参数而已，$1代表\-，$2代表\d+，$3代表\d\d
this.ruleFrom.value = this.ruleFrom.value.replace(/[^\d^\.]+/g,''); // 只允许输入数字和.
// 限制整数位最多11位
let nn = this.ruleFrom.value.split('.')
if (nn[0].length > 11) {
  nn[0] = nn[0].substring(0, 11)
}
this.ruleFrom.value = nn.join('.')

5、判断字符串由数字、字母、下划线以及-组成，且第一个字符必须是数字或字母

/^[a-zA-Z0-9][a-zA-Z0-9_-]*$/.test(this.realsearchValue2)

如果不需要判断第一个字符必须是数字或字母，可以去掉^[a-zA-Z0-9]

6、判断字符串由数字字母组成，并且长度大于8或者长度在一个区间范围内

/^[0-9A-Za-z]{8,}$/.test(this.realsearchValue2)

{8,}可以更换为自己需要的范围：{最小几位,最大几位}

7、强密码校验

// pattern.js文件中
export const versionPattern = /^([1-9]\d|[0-9])(\.([1-9]\d|\d)){2}$/;

export const appKeyPattern = /^[0-9A-Za-z]{8,}$/;

// 用于校验密码是否为强密码
export const regEnUp = /[A-Z]+/;
export const regEnLow = /[a-z]+/;
export const regNum = /[0-9]+/;
export const regSymbol = /[!@#$%^&]+/;

export const notForcePassword = value => {
  let num = 0;
  if (regSymbol.exec(value)) {
    num += 1;
  }
  if (regEnUp.exec(value)) {
    num += 1;
  }
  if (regEnLow.exec(value)) {
    num += 1;
  }
  if (regNum.exec(value)) {
    num += 1;
  }
  if (num < 3) {
    return true;
  }
  return false;
};


 // 校验方法
  const validatePassword = (rule, value, callback) => {
      const reg = /^[a-zA-Z0-9!@#$%^&]+$/;
      if (!reg.exec(value)) {
        callback(new Error('符号只支持!@#$%^&，请重新输入'));
      }
      if (value.length < 10) {
        callback(new Error('密码长度不能少于10位，请重新输入'));
      }
      if (value.length > 20) {
        callback(new Error('密码长度不能超过20位，请重新输入'));
      }
      if (notForcePassword(value)) {
        callback(new Error('密码至少包含大小写字母、数字、特殊字符中三项'));
      }
      if (this.form.password1 !== '') {
        // 执行password1校验规则
        this.$refs.loginForm.validateField('password1');
      }
      callback();
    };

8、网址校验

/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/

不限制必须http(s)开头的网址校验

/^((\w|[\u4e00-\u9fa5])+?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/

9、日期时间校验以及时间校验

日期时间YYYY-MM-DD HH:mm:ss

/^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/

时间HH:mm

/^(?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]$/

10、限制只能输入正数，并且限制整数位的最大3位

这个是正则和js代码混合实现的，限制整数位最多三位，小数位通过限制input输入的长度实现，和4要实现的是一个功能，方法略微改变

// html部分
<el-input
  v-model.trim="value"
  :maxlength="8"
  @input="val => limitMax(val)"
/>

// js部分
    limitMax(val) {
      // 限制只能输入数字和.、限制首位不能是.、限制只能有一个.
      let value = val.replace(/[^(\d||/.)]/g, '').replace(/^\./g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      const pointIndex = value.indexOf('.')
      // 整数位大于3，则截取
      if (pointIndex > 3) {
        value = value.substring(pointIndex - 3)
      } else if (pointIndex === -1) {
        // 不存在小数点的时候，直接截取整个字符，保留三位整数
        value = value.substring(0, 3)
      }
      this.value = value
    }

遇到之后再继续更新