How to use Regex validation in input field to validate the vehicle registration plate in Vue 3?

Question

I want to validate the input field so that it can take only capital alphabets and number and I want the format to be exactly like (AAA-111) meaning first 3 should be alphabets and last 3 should be number and both separated by '-'

<template>
  <div class="mt-6">
    <input
      type="text"
      placeholder="XXX-XXX"
      class="w-56 text-2xl bg-grat-300 p-3 rounded-lg focus:outline-none"
      v-model="number_plate"
    />
    <br />
  </div>
</template>
<script>
export default {
  props: ['template'],
  data: function() {
    return {
      number_plate: '',
      regex: '^[A-Z]{3}-d{3}'
    };
  },
  watch: {
    number_plate() {
      this.number_plate = this.number_plate.match(/(^[A-Z]{3})(\d{3})/g, '$1-$2');
    }
  }
};
</script>

I tried to use something like this but it does not work and I am very new to Vue also.

I followed one tutorial and found the solution for validating numbers in certain pattern but when I try to modify it, it doesn't work. Below is the snippet of the code where the first input field works fine displays number in 000-000 but the second one doesn't work where I want something like AAA-000

<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.format)
        .substr(0, this.reg_template.length);
    }
  }
};
</script>

Answer 1

This has nothing to do with Vue. Html can already do that for you. But if you want some custom validation, then that's different story. Try this in the template instead:

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

Apart from that, not sure where the this.number is comming from.