Vuetify Form Validation using Regex Expression-CodePudding

I am trying to get my vuetify form to validate my text box on the following criteria "AB-12345678" or if user forgos the hyphen and just puts in a number with a max of 8 digits. Can regex rules account for both of these scenarios in a single expression? My code so far:

        <v-form ref="sidebarSearchForm" lazy-validation v-on:submit.prevent>
        @Html.AntiForgeryToken()
        <v-text-field label="Search"
                      single-line
                      filled
                      rounded
                      dense
                      append-icon="mdi-magnify"
                      v-model="id"
                      :rules"[v => !!v || 'ID Required!']"
                      @@click:append="searchID"
                      v-bind="{error: !validationProp,...(!validationProp && { 'error-messages': ['ID not found!'] })}"></v-text-field>
    </v-form>

CodePudding user response：

You can add multiple rules using regex or simple like this:

(Update the regex as per your requirement)

 <v-text-field
      v-model="id"
      :rules="idRules"
      label="Search"
      required
    ></v-text-field>


data: () => ({
        idRules: [
        v => !!v || 'Field is required',
        v => /. @. \.. /.test(v) || 'Expression must be valid',
      ],
  }),

CodePudding user response：

If you want to match both (2 letters)-(8 digits) and (8 digits)

Try this:

^([a-zA-Z]{2}-\d{8})$|^(\d{8})$

In vue rules:

v => /^([a-zA-Z]{2}-\d{8})$|^(\d{8})$/.test(v) || 'Expression must be valid',

https://regex101.com/r/37EqR9/1