Vue3中如何使用正则表达式实现输入框实时校验

问题根因 #

现有代码不生效的核心问题有4个：

• 正则语法错误：匹配数字的元字符遗漏反斜杠，错误写为d，正确写法为\d
• 车牌正则规则错误：前3位需匹配字母，仍用了数字匹配规则，需改为[a-zA-Z]匹配大小写字母
• 监听逻辑引用错误：number_plate的监听回调中错误使用了数字输入框的格式化模板this.format，应该使用车牌专属的this.reg_format
• 无效字符未过滤：车牌输入没有提前过滤不符合要求的字符，导致正则匹配失败

完整修改代码 #

<template>
  <div class="mt-6">
    <input
      type="text"
      :placeholder="number_template"
      class="w-56 text-2xl bg-gray-300 p-3 rounded-lg focus:outline-none"
      v-model="number"
    />
    <br /><br />
    <input
      type="text"
      :placeholder="reg_template"
      class="w-56 text-2xl bg-gray-300 p-3 rounded-lg focus:outline-none"
      v-model="number_plate"
    />
  </div>
</template>
<script>
export default {
  props: {
    // 给prop加默认值，避免模板为空时报错
    number_template: {
      type: String,
      default: 'XXX-XXX'
    },
    reg_template: {
      type: String,
      default: 'XXX-XXX'
    }
  },
  data: function() {
    return {
      number: '',
      number_format: '', 
      regex: '', 
      reg_regex: '', 
      reg_format: '', 
      number_plate: ''
    };
  },
  mounted() {
    // 数字输入框逻辑保留，修复正则语法错误
    let x = 1;
    this.format = this.number_template.replace(/X+/g, () => '$' + x++);
    this.number_template.match(/X+/g).forEach((char, key) => {
      // 补全\d的反斜杠
      this.regex += `(\\d{${char.length}})?`;
    });

    // 车牌输入框正则生成逻辑修改，区分字母和数字分组
    let y = 1;
    this.reg_format = this.reg_template.replace(/X+/g, () => '$' + y++);
    this.reg_template.match(/X+/g).forEach((char, key) => {
      // 第一个分组匹配字母，第二个分组匹配数字
      if (key === 0) {
        this.reg_regex += `([a-zA-Z]{${char.length}})?`
      } else {
        this.reg_regex += `(\\d{${char.length}})?`
      }
    });
  },
  watch: {
    number() {
      this.number = this.number
        .replace(/[^0-9]/g, '')
        .replace(/^(\d{3})?(\d{3})/g, this.format)
        .substr(0, this.number_template.length);
    },
    number_plate() {
      // 先统一转大写，过滤所有非字母数字的无效字符
      let inputVal = this.number_plate.toUpperCase().replace(/[^A-Z0-9]/g, '')
      // 拆分字母段和数字段，分别过滤
      const letterPart = inputVal.slice(0,3).replace(/[^A-Z]/g, '')
      const numPart = inputVal.slice(3).replace(/[^0-9]/g, '')
      inputVal = letterPart + numPart
      // 按模板格式化后赋值
      this.number_plate = inputVal
        .replace(/^([A-Z]{0,3})(\d{0,3})/g, this.reg_format)
        .substr(0, this.reg_template.length);
    }
  }
};
</script>

功能说明 #

修改后可实现效果：

• 输入时自动过滤无效字符，前3位仅允许输入大小写字母，自动转大写
• 第4位开始仅允许输入数字，输入满3位字母后自动拼接-分隔符
• 实时触发校验，最大输入长度和模板保持一致

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