VUE下的表单常用正则验证

我们在工作中经常会遇到这样的场景，在表单内输入一段文本，且输入只能为数字或者数字加字母，或者更为复杂一些，有位数限制或者大小写并存等，这样我们就需要对表单进行正则验证，举个简单的例子：
这里采用elment UI的input表单格式，要求输入的字符串只能是字母或数字

<el-input v-model="userid" type="text" placeholder="请输入会员ID" />

可以先将匹配条件定义一个变量，用test()去匹配它

data() {
  return { inputed: /[\u4E00-\u9FA5]/g,}
}

然后我们提交表单的时候，执行定义的函数就可以了。

methods: {
  onSubmit() {
    if (!this.inputed.test(this.userid)){
        console.log(“符合条件”)
        }else{
        console.log(“不符合条件”)
        }
  }
}

这样就实现了输入的验证。
下面列出验证时常用的正则表达式，后续的会陆续补充

inputed: /[^\d]/g //只能输入数字
inputed: /[^a-zA-Z]/g //只能输入英文
inputed: /[^\d\x\X]/g //只能输入数字和英文/[\W]/g
inputed: /[^\u4E00-\u9FA5]/g //只能输入中文
inputed: /[\u4E00-\u9FA5]/g //输入非中文字符
inputed: /^[a-zA-Z0-9_]{1,}$/ //仅支持字母数字下划线
inputed: /^[1-9]\d*$/ //正整数
inputed: /^[A-Za-z0-9]{6,7}$/ //输入的字母数字长度限制在 6-7
inputed: /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/ //24小时制时间（HH:mm:ss）
inputed: /^(?:1[0-2]|0?[1-9]):[0-5]\d:[0-5]\d$/ //12小时制时间（hh:mm:ss）
inputed: /^(?:(?:\+|00)86)?1\d{10}$/ //中国手机号
inputed: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ //邮箱地址
inputed: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/ //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
inputed: /[^A-Za-z0-9\u4e00-\u9fa5]/g //只能输入数字，英文及中文