Vuetify Form Validation using Regex Expression

Bradyboyy88 0
Viewed 47

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>
vuetify.js vue.js regex
3 Answers

Here is the full example: using this regex

^([a-zA-Z]{2}-\d{0,8}$|^\d{0,8}$)
  • AA1221212 (Not valid)
  • AA-111 (Valid)
  • AA-12345678 (Valid))
  • ABC-12345678 (Not valid)
  • 12345678 (Valid)
  • 123456789 (Not valid)
  • 123 (Valid)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid: true,
    id: '',
    idRules: [
      v => !!v || 'Field is required',
      v => /^([a-zA-Z]{2}-\d{0,8}$|^\d{0,8}$)/.test(v) || 'Expression must be valid'
    ],
   
  }),

  methods: {
    validate () {
      this.$refs.form.validate()
    },
    reset () {
      this.$refs.form.reset()
    },
    resetValidation () {
      this.$refs.form.resetValidation()
    },
  },
})
   
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
      
<v-form
      ref="form"
      v-model="valid"
      lazy-validation
    >
      <v-text-field
        v-model="id"
        :counter="10"
        :rules="idRules"
        label="Search"
        required
      ></v-text-field>
  
     
      <v-btn
        :disabled="!valid"
        color="success"
        class="mr-4"
        @click="validate"
      >
        Validate
      </v-btn>
  
      <v-btn
        color="error"
        class="mr-4"
        @click="reset"
      >
        Reset Form
      </v-btn>
  
      <v-btn
        color="warning"
        @click="resetValidation"
      >
        Reset Validation
      </v-btn>
    </v-form>
      
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Arslan Butt0

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',
      ],
  }),
Arslan Butt0

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

huan feng0
Related