如何使用正则表达式验证 Vue3 中的输入字段？

问题描述

如何使用正则表达式进行自定义输入字段验证？我希望输入字段只有前 3 个输入作为字母，最后 3 个输入作为由“-”分隔的数字。我想在尝试输入内容的同时验证它。

我只找到了验证数字的解决方案，但是当我尝试对字母和数字使用相同的代码时，它不起作用。我还希望输入字段对每个击键进行验证。

<template>
  <div class="mt-6">
    <input
      type="text"
      :placeholder="number_template"
      class="w-56 text-2xl bg-grat-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-grat-300 p-3 rounded-lg focus:outline-none"
      v-model="number_plate"
    />
  </div>
</template>
<script>
export default {
  props: ['number_template','reg_template'],data: function() {
    return {
      number: '',number_format: '',// number pattern for Now XXX-XXX
      regex: '',//regex for number pattern
      reg_regex: '',// regex for registration plate number
      reg_format: '',// pattern for registration number for Now XXX-XXX (first 3 are letters and last 3 are numbers)
      number_plate: ''
    };
  },mounted() {
    let x = 1;
    this.format = this.number_template.replace(/X+/g,() => '$' + x++);
    console.log(this.format);
    this.number_template.match(/X+/g).forEach((char,key) => {
      this.regex += '(d{' + char.length + '})?';
      console.log(this.regex);
      console.log(char.length);
      console.log(key);
    });
    let y = 1;
    this.reg_format = this.reg_template.replace(/X+/g,() => '$' + y++);
    console.log(this.reg_format);
    this.reg_template.match(/X+/g).forEach((char,key) => {
      this.reg_regex += '(d{' + char.length + '})?';
      console.log(this.reg_regex);
      console.log(char.length);
      console.log(key);
    });
  },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() {
      this.number_plate = this.number_plate
        .replace(/([A-Z]{3})?(d{3})/g,this.reg_template.length);
    }
  }
};
</script>

此代码适用于第一个输入字段，但不适用于第二个输入字段。我可能需要更改挂载函数中的某些内容，它试图匹配 reg_regex，但我不知道如何去做。

解决方法

浏览器使用 pattern 属性原生支持此功能：

<input
  type="text"
  :placeholder="reg_template"
  class="w-56 text-2xl bg-grat-300 p-3 rounded-lg focus:outline-none"
  v-model="number_plate"
  pattern="\w{3}-\d{3}"
/>

这将在用户键入时验证表单输入客户端。