I am trying to determine how to use Vuetify validation to ensure the rules (using :rules tag on a v-text-field) meet this format:

AB-12345678 (first two characters are letters followed by hyphen then 8 digit number)

I am struggling to do this without using CharAt but I assume there is a cleaner and simpler method.

CodePudding user response：

you can use regex to check vailation

regex rule: [A-B]{2}-[0-9]{8}

check the code

<template>   
  <v-text-field
      :rules="customRule"
  />
</template>

<script>

export default {
  computed: {
    customRule() {
      return [
        v => /[A-B]{2}\-[0-9]{8}/.test(v) || "rule is not valid"
      ],
    }
  }
}

</script>

CodePudding user response：

I'd use regex

<v-text-field
  :rules="[v => /^[A-Z]{2}-\d{8}$/gm.test(v)]"
/>

It depends on exactly what you want but this regex is doing:

• ^ match start of line
• [A-Z]{2} match exactly 2 uppercase characters
  • Use [A-Za-z]{2} if upper/lowercase doesn't matter
• - match a dash
• \d{8} match 8 digits
• $ match end of line
• gm at the end are flags for the regex

Here's a page to test it

CodePudding user response：

You should consider using Regular Expressions. Something like : ^[A-Z]{2}-[0-9]{8}$ should work.

To use Regex in javascript, you should refer to the Mozilla developers docs

It looks like this :

const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// expected output: Array ["T", "I"]