在JS/Vue.js中如何用正则匹配4位字母加4位数字的xxxx1111格式？

你的正则存在3处错误： #

• 开头的单词边界符少了反斜杠，你写的b是普通字符匹配，需要改成\b才能生效为单词边界标识
• [a-z]{4}后多余的+量词属于语法错误，{4}已经指定精确匹配4次小写字母，额外加+会导致正则解析异常
• 如果你需要整个输入字符串完全匹配规则，用单词边界\b无法限制首尾存在其他字符的情况，应该用^匹配字符串开头、$匹配字符串结尾，避免出现abcd1234ef这类不符合要求的内容也被部分匹配的问题

正确正则写法 #

全匹配规则的正则为：
/^[a-z]{4}[0-9]{4}$/

如果需要允许前后存在空白字符（后续自行trim处理），可以调整为：
/^\s*[a-z]{4}[0-9]{4}\s*$/

Vue中常用的校验实现示例 #

1. 输入框实时限制输入（不符合规则的内容自动过滤） #

<template>
  <input v-model="code" @input="handleInput" placeholder="请输入4位小写字母+4位数字，例如qwer1234">
</template>

<script>
export default {
  data() {
    return {
      code: ''
    }
  },
  methods: {
    handleInput() {
      // 仅保留小写字母和数字，且限制最大长度为8
      this.code = this.code.replace(/[^a-z0-9]/g, '').slice(0,8)
    }
  }
}
</script>

2. 表单提交时校验 #

const validateCode = (code) => {
  const reg = /^[a-z]{4}[0-9]{4}$/
  return reg.test(code)
}

// 调用示例
if (!validateCode(this.code)) {
  alert('输入格式错误，请输入4位小写字母后接4位数字')
  return false
}

内容的提问来源于stack exchange，提问作者Alan K